Javascript：URL傳值，中文變亂碼
===

###### tags: `javascript`

Coding時因為某些需求要在url後方加上參數傳值，傳送的值又正好是中文，那對方收到的就會變成像"%E4%B8%BB%E7%B7"的亂碼。

這其實是16進位編碼，URL在網路上只能以ASCII碼傳送，而ASCII就只有英、數字及特殊符號，因為沒有支援中文字體，因此將中文以UTF-8轉成16進位編碼。

那現在如果URL要傳中文的值該怎麼辦呢？

解碼就好啦！:smile:

### encodeURI/decodeURI

encodeURI()能夠將中文字串以UTF-8轉成16進位編碼。
相反的，decodeURI()可以將其解碼。
範例：

encodeURI("中文");
// "%E4%B8%AD%E6%96%87"

decodeURI("%E4%B8%AD%E6%96%87");
// "中文"

### encodeURIComponent/decodeURIComponents

當中文中含有特殊符號時，會發現使用encodeURI/decodeURI無法將其做編碼/解碼，這可能造成後續程式碼誤判為特殊指令而中斷剖析。
:::warning
特殊符號包含 ; / ? : @ & = + $ , #
:::
原因是encodeURI/decodeURI會假定輸入的是完整URI，因此它不會解碼屬於URI語法的字符。

若要連同特殊符號一起編碼/解碼，則必須使用encodeURIComponent/decodeURIComponents。

範例：

encodeURIComponent("https://xxx/JS: a_scripting");
// "https://xxx/JS%3A%20a_scripting"

decodeURIComponent("https://xxx/JS%3A%20a_scripting");
// "https://xxx/JS: a_scripting"


/* decodeURI()不會將特殊符號解碼 */
decodeURI("https://xxx/JS%3A%20a_scripting");
// "https://xxx/JS%3A a_scripting"

:::danger
要注意!!若使用的話，選取要編碼/解碼的字段丟進去處理就可以了，不可將整個URL丟進去哦!
:::

---

參考文獻：
* [mdn](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/decodeURI)
* [雲騰訊-解决js url传值中文乱码问题](https://cloud.tencent.com/developer/article/1334325?from=15425&areaSource=102001.1&traceId=5k1VA1ZNnSsHE_WUZNv0N)
* [Javascript: 網址亂碼如何處理](https://acupun.site/lecture/html5_CSS_javascript/7-code02.html)