紀錄工作經驗、相關知識,解決技術相關問題。

Javascript, React, 工作雜談, 新手 Jamp Holes, 未分類, 網站相關

JS 全形轉半形的字符轉換方法

在處理多語言文本時,尤其是涉及中文、日文和韓文(CJK)字符時,經常需要將全形字符轉換為半形字符。以下介紹幾種在 JavaScript 中實現全形轉半形轉換的方法。

什麼是全形和半形字符?

全形字符(full-width characters)通常佔用兩個字節,顯示時占用的空間比半形字符(half-width characters)大,後者通常只佔用一個字節。例如,英文和數字字符在全形模式下佔用更大的顯示空間。

轉換方法

1. 使用 replace 方法

可以使用 replace 方法和正則表達式將全形字符替換為相應的半形字符。以下是將全形字符轉換為半形字符的範例:

function convertToHalfWidth(str) {
    return str.replace(/[!-~]/g, function(char) {
        return String.fromCharCode(char.charCodeAt(0) - 0xFEE0);
    });
}

// 範例使用
let fullWidthStr = 'abcdefg+!123';
let halfWidthStr = convertToHalfWidth(fullWidthStr);
console.log(halfWidthStr);
// 輸出: abcdefg+!123

2. 使用 normalize 方法

function convertToHalfWidth(str) {
    return str.normalize('NFKC');
}

// 範例使用
let fullWidthStr = 'abcdefg+!123';
let halfWidthStr = convertToHalfWidth(fullWidthStr);
console.log(halfWidthStr); 
// 輸出: abcdefg+!123

使用場景

字符寬度轉換在處理 CJK 網站時尤為重要,特別是在網頁表單中,例如在輸入電話號碼或地址時,有些公司要求使用全形字符,有些則要求使用半形字符,通過 JavaScript 可以自動在輸入時進行轉換,提升用戶體驗。這樣也可以避免數據庫中出現全形和半形字符混用的情況,從而提高數據一致性。

參考資料

Amayadori – Nomad Coder Life in Japan
CodePen
Hirameki Dev
Hirameki Dev
GitHub
Unix & Linux Stack Exchange
EmEditor

發表迴響