js拼接URL字符串

技术博客 (105) 2023-11-20 09:01:01

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

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)}

THE END

发表回复