js页面中的字符串拼接

实际开发中，经常会遇到http请求(特别是get请求)或者跳转页面需要拼接URL请求字符串，

一、而经常性的思维就是利用“+”进行字符串拼接：

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

　我采用这个方式是好使得

//删除文件夹
 	 var deleteTreeNode =function() {
	  		hideRMenu();
	  		var nodeid=a
	  		console.log("====deleteTree====")
			console.log("传入后台的id："+a)
			
			var baseUrl = '${ctx}/mytrees/myTrees/deleteTree'
			var x = "id", y = nodeid
			var finalUrl = baseUrl + '?id=' + y 
			console.log(finalUrl)
			
			confirmx("您确定要删除文件夹么？",finalUrl)

confirmx("您确定要删除文件夹么？",finalUrl) 
这是自定义的弹出框，

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

二、高级一点就是使用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)}`

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

js页面中的字符串拼接

猜你喜欢