js拼接URL字符串

xiaoxiao2021-02-28  89

实际开发中,经常会遇到http请求(特别是get请求)或者跳转页面需要拼接URL请求字符串,而经常性的思维就是利用“+”进行字符串拼接:

var baseUrl = 'www.google.com' var a = 1, b = 'request', c = true var finalUrl = baseUrl + '?a=' + a + '&b=' + b + '&c=' + c

这种方法看起来丑陋笨拙,最不优雅。

高级一点就是使用es6 ““”进行拼接:

const finalUrl = `${baseUrl}?a=${a}&b=${b}&c=${c}`

舒了一口气的感觉,代码量少,比较简洁。

还有一种推荐的写法,也非常适用于实际项目开发,那就是将对象形式转化为URL请求字符串的代码提取成为一个工具函数,需要的时候import就可以了:

/** * 拼接对象为请求字符串 * @param {Object} obj - 待拼接的对象 * @returns {string} - 拼接成的请求字符串 */ export function encodeSearchParams(obj) { const params = [] Object.keys(obj).forEach((key) => { let value = obj[key] // 如果值为undefined我们将其置空 if (typeof value === 'undefined') { value = '' } // 对于需要编码的文本(比如说中文)我们要进行编码 params.push([key, encodeURIComponent(value)].join('=')) }) return params.join('&') }

然后使用的姿势:

const obj = { a: 1, b: 'request', c: true, } const finalUrl = `${baseUrl}?${encodeSearchParams(obj)}`

再也不用重复写那些烦人的单双引号和${}占位符了

便捷优雅——爽到无法呼吸~

转载请注明原文地址: https://www.6miu.com/read-42218.html

最新回复(0)