在JS中獲取字符串的位數(shù)的幾種方法小結(jié)
更新時間：2026年06月01日 09:37:50 作者：雷工筆記
在 JavaScript 中獲取字符串的位數(shù)（字符數(shù)）有多種方法,核心區(qū)別在于是否能正確處理 Unicode 特殊字符（如 emoji、生僻字）,以下是詳細(xì)解析和最佳實踐,需要的朋友可以參考下
引言
今天在使用KingFusion開發(fā)MES系統(tǒng)的過程中，遇到需要獲取字符串有幾位的判斷；
在 JavaScript 中獲取字符串的 “位數(shù)”（字符數(shù)）有多種方法，核心區(qū)別在于是否能正確處理 Unicode 特殊字符（如 emoji、生僻字）。
以下是詳細(xì)解析和最佳實踐：
一、最常用：length屬性（基礎(chǔ)場景）
語法
字符串.length
說明
- 這是 JavaScript 原生提供的只讀屬性，不是方法，無需加括號
- 計數(shù)規(guī)則：按UTF-16 代碼單元統(tǒng)計，每個 BMP 平面（基本多語言平面）字符占 1 個代碼單元
- 適用場景：僅包含 ASCII 字符、中文、日文、韓文等常見字符的字符串
示例
console.log("abc".length); // 3（英文字母）
console.log("你好世界".length); // 4（中文）
console.log("123456".length); // 6（數(shù)字）
console.log("a1b2c3".length); // 6（混合）二、致命坑點：length對特殊字符計數(shù)錯誤
length 無法正確識別占 2 個 UTF-16 代碼單元的字符，會導(dǎo)致計數(shù)翻倍：
- Emoji 表情（如??、??、??）
- 生僻漢字（如??、??、??）
- 特殊符號（如??、??????）
錯誤示例
console.log("??".length); // 2（實際1個字符）
console.log("????".length); // 4（實際2個字符）
console.log("??".length); // 2（實際1個生僻字）
console.log("a??b".length); // 4（實際3個字符）三、正確獲取所有字符數(shù)（含特殊字符）
方法 1：ES6 擴展運算符[...str].length（推薦）
利用 ES6 的迭代器特性，能正確拆分 Unicode 字符，性能優(yōu)秀且寫法簡潔。
console.log([..."??"].length); // 1（正確） console.log([..."????"].length); // 2（正確） console.log([..."a??b"].length); // 3（正確） console.log([..."??????"].length); // 3（正確）
方法 2：Array.from(str).length（兼容性更好）
功能與擴展運算符完全一致，對舊環(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)計數(shù)量。
function getCharCount(str) {
return (str.match(/./gu) || []).length;
}
console.log(getCharCount("??????")); // 3
console.log(getCharCount("")); // 0（空字符串處理）四、拓展：獲取字符串的字節(jié)數(shù)
如果需要獲取字符串的字節(jié)長度（而非字符數(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對應(yīng)）
function getUtf16ByteLength(str) {
return str.length * 2;
}
console.log(getUtf16ByteLength("abc")); // 6
console.log(getUtf16ByteLength("??")); // 4五、方法對比與最佳實踐
| 方法 | 正確處理特殊字符 | 性能 | 兼容性 | 適用場景 |
|---|---|---|---|---|
str.length | ? | 極高 | 所有瀏覽器 | 僅含常見字符的簡單場景 |
[...str].length | ? | 高 | ES6+（現(xiàn)代瀏覽器） | 絕大多數(shù)業(yè)務(wù)場景（推薦） |
Array.from(str).length | ? | 高 | ES6+ | 與擴展運算符一致 |
正則/./u | ? | 中 | ES6+ | 特殊正則匹配場景 |
TextEncoder | - | 中 | 現(xiàn)代瀏覽器 | 需要 UTF-8 字節(jié)數(shù)時 |
通用最佳實踐
// 封裝一個通用的字符數(shù)獲取函數(shù)
function getStringLength(str) {
// 空字符串處理
if (!str) return 0;
// 優(yōu)先使用擴展運算符
return [...str].length;
}
// 使用示例
console.log(getStringLength("你好??世界123")); // 7六、常見業(yè)務(wù)場景注意事項
- 輸入框字?jǐn)?shù)限制：如果允許用戶輸入 emoji，絕對不能用
length，否則會出現(xiàn) “輸入 1 個 emoji 算 2 個字符” 的 bug - 字符串截斷：截斷包含 emoji 的字符串時，需用
Array.from拆分后再截取，避免截斷到代理對中間導(dǎo)致亂碼 - 后端交互：后端通常按 UTF-8 字節(jié)數(shù)限制長度，前端需提前用
TextEncoder計算并提示用戶
以上就是在JS中獲取字符串的位數(shù)的幾種方法小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于JavaScript獲取字符串位數(shù)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
和同事討論js時，我說較為理想的狀態(tài)是，把js當(dāng)一把好用的匕首，隨手拿來，捅一刀子就走。話雖如此，但現(xiàn)實生活中大部分時候的情況是不理想的。2009-06-06
Three.js利用Detector.js插件如何實現(xiàn)兼容性檢測詳解
這篇文章主要給大家介紹了關(guān)于Three.js利用Detector.js插件如何實現(xiàn)兼容性檢測的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-09-09
微信小程序?qū)崿F(xiàn)發(fā)送驗證碼按鈕效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)發(fā)送驗證碼按鈕效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
微信小程序視圖容器(swiper)組件創(chuàng)建輪播圖
這篇文章主要為大家詳細(xì)介紹了微信小程序視圖容器（swiper）組件創(chuàng)建輪播圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-08-08
JavaScript實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁通信方式詳解
在瀏覽器中,多個標(biāo)簽頁（頁簽）之間的通信有一些方法可以實現(xiàn),這篇文章為大家整理了6個常用的方法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-03-03
JavaScript對象類型轉(zhuǎn)換的分類及步驟詳解
這篇文章主要為大家介紹了JavaScript對象類型轉(zhuǎn)換的分類及步驟詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要介紹了uniapp時間格式和距離格式的轉(zhuǎn)換,第一種是把? YYYY-MM-DD hh:mm:ss 轉(zhuǎn)換成?MM月DD日,第二種是把? hh:mm:ss 轉(zhuǎn)換成?hh:mm,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
這篇文章主要介紹了微信小程序動態(tài)設(shè)置圖片大小的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了qrcode生成二維碼微信長按無法識別問題的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了js實現(xiàn)div在頁面拖動效果,涉及JavaScript動態(tài)操作頁面元素與數(shù)值計算的相關(guān)技巧,需要的朋友可以參考下2016-05-05