js拼接URL字符串

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

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

1
2
3

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

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

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

1

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

还有一种推荐的写法，也非常适用于实际项目开发，那就是将对象形式转化为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('&')
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

然后使用的姿势：

const obj = {
    a: 1,
    b: 'request',
    c: true,
}

const finalUrl = `${baseUrl}?${encodeSearchParams(obj)}`

1
2
3
4
5
6
7

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

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

js拼接URL字符串

浏览过的版块