引言

今天在使用KingFusion開發(fā)MES系統(tǒng)的過(guò)程中，遇到需要獲取字符串有幾位的判斷；
在 JavaScript 中獲取字符串的 “位數(shù)”（字符數(shù)）有多種方法，核心區(qū)別在于是否能正確處理 Unicode 特殊字符（如 emoji、生僻字）。

以下是詳細(xì)解析和最佳實(shí)踐：

一、最常用：length屬性（基礎(chǔ)場(chǎng)景）

語(yǔ)法

字符串.length

說(shuō)明

• 這是 JavaScript 原生提供的只讀屬性，不是方法，無(wú)需加括號(hào)
• 計(jì)數(shù)規(guī)則：按UTF-16 代碼單元統(tǒng)計(jì)，每個(gè) BMP 平面（基本多語(yǔ)言平面）字符占 1 個(gè)代碼單元
• 適用場(chǎng)景：僅包含 ASCII 字符、中文、日文、韓文等常見字符的字符串

示例

console.log("abc".length); // 3（英文字母）
console.log("你好世界".length); // 4（中文）
console.log("123456".length); // 6（數(shù)字）
console.log("a1b2c3".length); // 6（混合）

二、致命坑點(diǎn)：length對(duì)特殊字符計(jì)數(shù)錯(cuò)誤

length 無(wú)法正確識(shí)別占 2 個(gè) UTF-16 代碼單元的字符，會(huì)導(dǎo)致計(jì)數(shù)翻倍：

• Emoji 表情（如??、??、??）
• 生僻漢字（如??、??、??）
• 特殊符號(hào)（如??、??????）

錯(cuò)誤示例

console.log("??".length); // 2（實(shí)際1個(gè)字符）
console.log("????".length); // 4（實(shí)際2個(gè)字符）
console.log("??".length); // 2（實(shí)際1個(gè)生僻字）
console.log("a??b".length); // 4（實(shí)際3個(gè)字符）

三、正確獲取所有字符數(shù)（含特殊字符）

方法 1：ES6 擴(kuò)展運(yùn)算符[...str].length（推薦）

利用 ES6 的迭代器特性，能正確拆分 Unicode 字符，性能優(yōu)秀且寫法簡(jiǎn)潔。

console.log([..."??"].length); // 1（正確）
console.log([..."????"].length); // 2（正確）
console.log([..."a??b"].length); // 3（正確）
console.log([..."??????"].length); // 3（正確）

方法 2：Array.from(str).length（兼容性更好）

功能與擴(kuò)展運(yùn)算符完全一致，對(duì)舊環(huán)境的兼容性略好（需 ES6 支持）。

console.log(Array.from("??????").length); // 3 console.log(Array.from("你好??世界").length); // 5 

方法 3：正則表達(dá)式/./u匹配（備用）

使用帶u標(biāo)志的正則表達(dá)式匹配所有 Unicode 字符，再統(tǒng)計(jì)數(shù)量。

function getCharCount(str) {
  return (str.match(/./gu) || []).length;
}
console.log(getCharCount("??????")); // 3
console.log(getCharCount("")); // 0（空字符串處理）

四、拓展：獲取字符串的字節(jié)數(shù)

如果需要獲取字符串的字節(jié)長(zhǎng)度（而非字符數(shù)），不同編碼下結(jié)果不同：

1. UTF-8 字節(jié)數(shù)（最常用）

function getUtf8ByteLength(str) {
  return new TextEncoder().encode(str).length;
}
console.log(getUtf8ByteLength("abc")); // 3（1字節(jié)/字符）
console.log(getUtf8ByteLength("你好")); // 6（3字節(jié)/中文字符）
console.log(getUtf8ByteLength("??")); // 4（4字節(jié)/emoji）

2. UTF-16 字節(jié)數(shù)（與length對(duì)應(yīng)）

function getUtf16ByteLength(str) {
  return str.length * 2;
}
console.log(getUtf16ByteLength("abc")); // 6
console.log(getUtf16ByteLength("??")); // 4

五、方法對(duì)比與最佳實(shí)踐

通用最佳實(shí)踐

// 封裝一個(gè)通用的字符數(shù)獲取函數(shù)
function getStringLength(str) {
  // 空字符串處理
  if (!str) return 0;
  // 優(yōu)先使用擴(kuò)展運(yùn)算符
  return [...str].length;
}
// 使用示例
console.log(getStringLength("你好??世界123")); // 7

六、常見業(yè)務(wù)場(chǎng)景注意事項(xiàng)

1. 輸入框字?jǐn)?shù)限制：如果允許用戶輸入 emoji，絕對(duì)不能用length，否則會(huì)出現(xiàn) “輸入 1 個(gè) emoji 算 2 個(gè)字符” 的 bug
2. 字符串截?cái)?/strong>：截?cái)喟?emoji 的字符串時(shí)，需用Array.from拆分后再截取，避免截?cái)嗟酱韺?duì)中間導(dǎo)致亂碼
3. 后端交互：后端通常按 UTF-8 字節(jié)數(shù)限制長(zhǎng)度，前端需提前用TextEncoder計(jì)算并提示用戶