實際開發中，經常會遇到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

再也不用重複寫那些煩人的單雙引號和${}佔位符了

便捷優雅——爽到無法呼吸~