javascript URL 編碼與解碼

編碼與解碼函數

編碼函數

encodeURI
encodeURIComponent

解碼函數

decodeURI
decodeURIComponent

編碼規則相同點

會替換全部的字符，但不包括如下字符
非轉義的字符：字母 數字 - _ . ! ~ * ' ( )

編碼規則不一樣點

encodeURI 還會有一些不編碼的字符，以下
保留字符：; , / ? : @ & = + $
數字符號：#

解碼規則

解碼只會解碼對應規則編碼出來的字符串，若不會解碼出亂碼。
encodeURI ->(對應) decodeURI
encodeURIComponent -> (對應) decodeURIComponent
這裏的編碼你能夠用JavaScript自帶的編碼函數，固然你也能夠按照規則和標準自行開發編碼函數。

實戰應用舉例

說了這麼多可能不少人就問了，JavaScript自帶的編碼與解碼函數在實際中是如何應用的，爲何須要兩個不一樣的編碼與解碼函數。

const url = "https://auto.3g.163.com/";

// 字符串編碼
const params = {
  title: "今天去幹什麼？& 今天去哪裏浪？",
  desc: "去哪裏都行 & 哪裏都不去！！！"
};

function compURL(url, params) {
  let result = encodeURI(url) + "?";
  for (let key in params) {
    result +=
      encodeURIComponent(key) + "=" + encodeURIComponent(params[key]) + "&";
  } //這樣即便帶有一些符號 ？ & 等也能夠方便的從url 中獲取參數
  return result.slice(0, -1);
}

const urlCompd = compURL(url, params);

console.log(urlCompd);

// 字符竄解碼獲取數據

function parseURL(url) {
  const result = {
    sourceUrl: "",
    params: {}
  };
  result.sourceUrl = decodeURI(url.split("?")[0]);
  const paramStr = url.split("?")[1];
  const paramArr = paramStr.split("&");
  paramArr.forEach(item => {
    const itemArr = item.split("=");
    const key = decodeURIComponent(itemArr[0]),
      value = decodeURIComponent(itemArr[1]);
    result.params[key] = value;
  });
  return result;
}

const paramsData = parseURL(urlCompd);
console.log(paramsData);

在線代碼