常规写法

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

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

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

ES6模板写法

高级一点就是使用es6${}进行拼接:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/**
* 拼接对象为请求字符串
* @param {Object} obj - 待拼接的对象
* @returns {string} - 拼接成的请求字符串
*/
function encodeSearchParams(obj) {
var params = []

Object.keys(obj).forEach((key) => {
var 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
const obj = {
a: 1,
b: 'request',
c: true,
}

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

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

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

ES6方法使用体验

若要考虑兼容性问题,最后使用babel等转译插件转为ES5,否则在IOS9及以下,会出现整个js无法加载渲染的问题(笔者遇到的情况是页面js直接无加载,调试工具连接手机后推测出此问题)。

ES5方法简单改写

只是去掉了箭头函数,适配了下IOS9及IOS8,其他机型未测试

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/**
* 拼接对象为请求字符串
* @param {Object} obj - 待拼接的对象
* @returns {string} - 拼接成的请求字符串
*/
function encodeSearchParams(obj) {
var params = []
Object.keys(obj).forEach(function(key){
var value = obj[key];
if (typeof value === 'undefined') {
value = ''
}
// 对于需要编码的文本(比如说中文)我们要进行编码
params.push([key, encodeURIComponent(value)].join('='))
});
return params.join('&')

}

写在最后

js拼接字符串 https://blog.csdn.net/sjn0503/article/details/74936613