JavaScript 的 encodeURIComponent() 會將字串轉換成 UTF-8 編碼

之前遇到的狀況, 頁面編碼是 Big5, 於 JavaScript 端傳送的資料, 於後端收到的居然是 UTF-8.(註: 程式沒有做任何的轉碼動作.)

查了許久才知道是使用 JavaScript 的 encodeURIComponent() 的 Function 造成的. (註: encodeURIComponent() 就類同於 PHP 的 urlencode())

於 呂瑞麟老師 的 這篇 細談 URL 編碼 (Part IV) 有寫到: Javascript 的 encodeURIComponent() 方法會將傳入的字串轉換成 UTF-8 編碼的字元

原來 encodeURIComponent() 會自動把字串都轉成 UTF-8, 順便學習關於 encodeURIComponent() 的使用方式與差異~ 🙂

encodeURIComponent() 使用方法


url = url + "?name=" + encodeURIComponent("中文");


escape、encodeURI、encodeURIComponent 的差異

同樣都是對 URL 做編碼的動作, JavaScript 有三個方法可以用(escape、encodeURI、encodeURIComponent), 差異在哪呢?

下述摘錄自: escape、encodeURI 與 encodeURIComponent 的比較

一般情況下, 最好選擇 encodeURIComponent()。

以下就簡單說一下差異點:

1. escape()
   • 不編碼的符號包括: @*/+
   • escape 不編碼 + (加號), 將使表單欄位資料中有空白的處理(用 + 連結字串)造成問題。且 escape 在處理非 ASCII 語系的字元會有問題。所以, 除非特例, 應盡量避免使用 escape()。
2. encodeURI()
   • 不編碼符號包括: ~!@#$&*()=:/,;?+'
   • 用 encodeURI() 會比使用 escape() 轉換 URI 正確。比較要注意的是這個方法不處理 ' (單引號)。
3. encodeURIComponent()
   • 不編碼符號包括: ~!*()'
   • encodeURIComponent() 是適合大部分單一 URI 的編碼方法。這個方法通常可以正確的編出正確的編碼, 例如要編碼一段有 flash 的 html(參數有 & 符號), 如果用其他的方法, 大概解碼後 flash 也不能看了。比較要注意的是這個方法也不處理 ' (單引號)。

資訊更新

感謝 Thinker 的指正:

1. Javascript 本就是用 unicode 做處理，你可以試著把字串存檔試試
2. encodeURIComponent 在 firefox 早期的版本並不是永遠會轉成 utf8

作者: Tsung

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活. 檢視「Tsung」的全部文章