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

對新奇的事物都很有興趣, 喜歡簡單的東西, 過簡單的生活.

在〈JavaScript 的 encodeURIComponent() 會將字串轉換成 UTF-8 編碼〉中有 6 則留言

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

  2. 嗯嗯, 我遇到的狀況是 Big5 的資料, 送到後端居然是變 UTF-8, 不是 Big5.
    所以應該是 JS 本身都用 unicode 處理(把所有字串轉 unicode), 但是處理完後沒有把編碼轉回來?
    早期的 Firefox 版本... 呃... 先當做看不見好了. Orz..
    感謝指點~ 🙂

  3. encode本身是browser提供的行為...
    除非在server做編碼檢查,
    (或在server判斷瀏覽器版本後各自予以解碼)
    否則不容易控制瀏覽器要用什麼編碼方式..

    and.. 我比較好奇的是, 別的國家語系除了用UTF8, 是否有各自的編碼方式...

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料