在 JavaScript 開發中，處理特殊符號、多國語言字元或表情符號時，經常需要透過 Unicode 碼點來產生對應的字元。String.fromCodePoint() 便是為此而生的靜態方法，它能完美支援超出基本多語言平面的字元轉換。如果想進一步了解字元正規化與半形轉全形的基礎處理，建議可先閱讀站內這篇 JS 半形轉全形與 String.prototype.normalize 字元轉換 前導文章，建立更扎實的字串處理觀念。
一、Unicode 基礎概念與轉字元方法對照
Unicode 是一種計算機工業標準，旨在支援世界上所有書面語言的字元。每個字元都分配了一個唯一的碼點。Unicode 的編碼空間從 U+0000 到 U+10FFFF，並劃分為不同的平面：
- 基本多語言平面（BMP）：涵蓋
U+0000至U+FFFF，包含絕大多數常用語言的字元（如拉丁字母、中文、日文等）。 - 增補平面（Supplementary Planes）：涵蓋
U+10000至U+10FFFF，包含歷史文字、數學符號以及現代的表情符號（Emoji）等。
在實際開發中，比較 String.fromCharCode() 與 String.fromCodePoint() 的規格差異，能幫助我們避開舊版 API 的潛在亂碼問題：
| 比較維度 | String.fromCharCode() | String.fromCodePoint() |
|---|---|---|
| 支援範圍 | 僅限 BMP 平面（U+0000 至 U+FFFF） | 完整支援所有 Unicode 碼點（最高至 U+10FFFF） |
| 超過範圍表現 | 產生代理對（Surrogate Pairs）導致亂碼 | 完美識別並正確顯示表情符號與特殊字元 |
| 異常處理 | 忽略超出範圍或回傳錯誤字元 | 傳入無效碼點時會拋出 RangeError 異常 |
| 批次支援 | 支援多個數值參數 | 支援多個數值參數與 ES6 展開運算子 (...) |
二、為什麼需要 String.fromCodePoint() 與基本語法
在早期的 JavaScript 中，開發者主要依賴 String.fromCharCode() 來將 Unicode 數值轉為字元。然而，該方法的設計僅支援 16 位元的字元。當我們試圖用舊版方法去處理超過 U+FFFF 的增補平面字元（例如笑臉符號 U+1F600）時，它會將該碼點拆成兩個代理對，導致回傳無法正常顯示的亂碼：
// 舊版 String.fromCharCode() 面對超出 U+FFFF 的表情符號會產生代理對亂碼
console.log(String.fromCharCode(0x1F600)); // 輸出錯誤的亂碼字元為了解決這個歷史包袱，ES6 推出了 String.fromCodePoint()。其基本語法與參數結構如下：
String.fromCodePoint(num1[, ...[, numN]])- 參數：
num1, ..., numN為一個或多個 Unicode 碼點。 - 返回值：一個由指定碼點組成的字串。
三、核心實作範例與應用場景
在 JavaScript 中，除了直接呼叫靜態方法外，也可以使用特殊的 Unicode 轉義序列將 Unicode 程式碼點轉換為字元。
1. 基本轉義與基礎轉換範例
// 將 Unicode 程式碼轉換為字元
console.log('\u0041'); // 輸出: A
// 使用六位數 Unicode 程式碼表示笑臉符號
console.log('\u{1F600}'); // 輸出: 😀（在支援 ES6 的環境中）針對帶有 U+ 字首的字串進行解析時，可以搭配 parseInt 與 String.fromCodePoint()：
function unicodeToChar(unicode) {
return String.fromCodePoint(parseInt(unicode.substring(2), 16));
}
console.log(unicodeToChar('U+0041')); // 輸出: A
console.log(unicodeToChar('U+1F600')); // 輸出: 😀
// 建立一個包含地球表情符號和一顆心的歡迎訊息
const message = String.fromCodePoint(0x1F30E) + " Welcome to JavaScript World! " + String.fromCodePoint(0x2764);
console.log(message); // 輸出: 🌎 Welcome to JavaScript World! ❤2. 結合展開運算子（Spread Operator）批次轉換碼點陣列
除了傳入單一或多個分離的數值參數外，String.fromCodePoint() 也支援結合 ES6 的展開運算子（...），將一整串儲存了 Unicode 碼點的陣列一次性批次轉換為完整的字串：
// 宣告一個包含多個 Unicode 碼點的陣列 (分別對應 H, e, l, l, o)
const codePointsArray = [72, 101, 108, 108, 111];
// 使用展開運算子將陣列批次傳入 String.fromCodePoint()
const result = String.fromCodePoint(...codePointsArray);
console.log(result); // 輸出: Hello
// 混合一般文字與表情符號的碼點陣列轉換
const emojiArray = [0x1F44B, 0x1F680]; // 👋, 🚀
const greetingMessage = String.fromCodePoint(...emojiArray);
console.log(greetingMessage); // 輸出: 👋🚀四、生產環境實作考量與效能邊界
在企業級應用或大型前端專案中，處理大量字串與 Unicode 轉換時，必須留意以下幾項關鍵防禦機制：
1. 參數邊界與 RangeError 異常防護
當傳入的 Unicode 碼點數值超出有效範圍（即小於 0 或大於 0x10FFFF），或者包含無法解析的非數值時，String.fromCodePoint() 會拋出 RangeError 異常。在解析外部輸入或不可信的使用者資料時，務必加上 try...catch 與數值型別檢查：
function safeCodePointToChar(codePoint) {
try {
const num = Number(codePoint);
if (num < 0 || num > 0x10FFFF || isNaN(num)) {
throw new RangeError(`Invalid code point: ${codePoint}`);
}
return String.fromCodePoint(num);
} catch (error) {
console.error(error.message);
return ''; // 回傳安全預設值
}
}
console.log(safeCodePointToChar(0x1F600)); // 輸出: 😀
console.log(safeCodePointToChar(0x110000)); // 觸發 RangeError 並回傳空字串2. 記憶體與陣列展開限制
當使用展開運算子（...）批次轉換龐大的碼點陣列時，若陣列長度超過 JavaScript 引擎的參數數量上限（通常受限於 Function.prototype.apply 或堆疊大小限制），可能會導致 RangeError: Maximum call stack size exceeded。針對巨量資料處理，建議採用迴圈分批累加或 Array.prototype.reduce 進行字串串接。
總結
掌握 JavaScript 中的 Unicode 轉換是處理國際化內容與特殊符號的關鍵步驟。String.fromCodePoint() 提供了完整支援增補平面的能力，能有效避免舊版 String.fromCharCode() 產生的代理對亂碼。透過本文介紹的基礎語法、批次處理技巧與邊界異常防護，開發者能夠在 Web 應用中更安全、穩定地處理多語言文字與表情符號。
參考資料與延伸閱讀
- MDN Web Docs：String.fromCodePoint() 靜態方法說明
- MDN Web Docs：String.fromCharCode() 靜態方法說明
- MDN Web Docs：String.prototype.codePointAt() 方法說明
- MDN Web Docs：JavaScript 語法與字面值（Unicode 轉義序列）
- ECMAScript Language Specification：String.fromCodePoint 標準規範
- 延伸閱讀：Javascript location.protocol 語法教學：如何判斷網頁 http 或 https
- 延伸閱讀：如何使用Chrome套件解決Localhost開發中的CORS問題 – 前端無痛解決 CORS Error 問題
發表迴響