javascript URL 編碼與解碼

Eminjannn 發(fā)布于2019-08-23 18:37 / 3499人閱讀

摘要：對(duì)應(yīng)對(duì)應(yīng)這里的編碼你可以用自帶的編碼函數(shù)，當(dāng)然你也可以按照規(guī)則和標(biāo)準(zhǔn)自行開(kāi)發(fā)編碼函數(shù)。實(shí)戰(zhàn)應(yīng)用舉例說(shuō)了這么多可能很多人就問(wèn)了，自帶的編碼與解碼函數(shù)在實(shí)際中是如何應(yīng)用的，為什么需要兩個(gè)不同的編碼與解碼函數(shù)。

編碼與解碼函數(shù) 編碼函數(shù)

encodeURI
encodeURIComponent

解碼函數(shù)

decodeURI
decodeURIComponent

編碼規(guī)則相同點(diǎn)

會(huì)替換所有的字符，但不包括以下字符
非轉(zhuǎn)義的字符：字母數(shù)字 - _ . ! ~ * " ( )

編碼規(guī)則不同點(diǎn)

encodeURI 還會(huì)有一些不編碼的字符，如下
保留字符：; , / ? : @ & = + $
數(shù)字符號(hào)：#

解碼規(guī)則

解碼只會(huì)解碼對(duì)應(yīng)規(guī)則編碼出來(lái)的字符串，若不會(huì)解碼出亂碼。
encodeURI ->(對(duì)應(yīng)) decodeURI
encodeURIComponent -> (對(duì)應(yīng)) decodeURIComponent
這里的編碼你可以用JavaScript自帶的編碼函數(shù)，當(dāng)然你也可以按照規(guī)則和標(biāo)準(zhǔn)自行開(kāi)發(fā)編碼函數(shù)。

實(shí)戰(zhàn)應(yīng)用舉例

說(shuō)了這么多可能很多人就問(wèn)了，JavaScript自帶的編碼與解碼函數(shù)在實(shí)際中是如何應(yīng)用的，為什么需要兩個(gè)不同的編碼與解碼函數(shù)。

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]) + "&";
  } //這樣即使帶有一些符號(hào) ？ & 等也可以方便的從url 中獲取參數(shù)
  return result.slice(0, -1);
}

const urlCompd = compURL(url, params);

console.log(urlCompd);

// 字符竄解碼獲取數(shù)據(jù)

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);

在線代碼