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)}`
再也不用重複寫那些煩人的單雙引號和${}佔位符了