JavaScript emoji 字數怎麼算？Intl.Segmenter 計數與安全截斷

2026-11-07

前端

JavaScript

/

前端開發

/

問題解決

/

教學

本文目錄

表單只輸入一個家庭 emoji，text.length 卻是 11，直接 slice(0, 1) 還可能留下半個代理對。JavaScript 的 length 計算 UTF-16 code units；畫面上的字數與截斷，應先按 grapheme cluster（字素叢集）定義需求，再使用 Intl.Segmenter。

MDN String.length說明 code unit 與 Unicode 字元的差異。[...text] 按 code point 展開，能保留單一 supplementary code point，但家庭、膚色及國旗等組合仍需字素分段。

先用同一組資料看出差異#

以下是獨立 .mjs 程式，可用 Node.js 執行：

1
import assert from 'node:assert/strict';
2

3
const segmenter = new Intl.Segmenter('zh-TW', { granularity: 'grapheme' });
4
const graphemes = text => Array.from(segmenter.segment(text), item => item.segment);
5
const cases = [
6
  ['', 0, 0, 0],
7
  ['台', 1, 1, 1],
8
  ['😀', 2, 1, 1],
9
  ['é', 2, 2, 1],
10
  ['👍🏽', 4, 2, 1],
11
  ['🇹🇼', 4, 2, 1],
12
  ['👨‍👩‍👧‍👦', 11, 7, 1],
13
];
14
for (const [text, units, points, clusters] of cases) {
15
  assert.equal(text.length, units);
16
  assert.equal([...text].length, points);
17
  assert.equal(graphemes(text).length, clusters);
18
}
19
console.log('三種計數：PASS');

這是字元分段驗證；實際字型可能把同一字素畫成不同圖像。Intl.Segmenter 文件區分 grapheme、word 與 sentence，用於畫面字數時明確選 grapheme。

截斷時保留整個字素#

下例將上限定義為保留的原文字素數，回傳值不附省略號。若產品要加 …，應另訂它是否占用上限，避免前端顯示與後端驗證使用不同政策。

1
import assert from 'node:assert/strict';
2

3
function truncateGraphemes(text, max) {
4
  if (typeof text !== 'string') throw new TypeError('text 必須是字串');
5
  if (!Number.isSafeInteger(max) || max < 0) {
6
    throw new RangeError('max 必須是非負安全整數');
7
  }
8
  if (typeof Intl.Segmenter !== 'function') {
9
    throw new Error('此環境需要支援 Intl.Segmenter');
10
  }
11
  if (max === 0) return '';
12
  const segmenter = new Intl.Segmenter('zh-TW', { granularity: 'grapheme' });
13
  let result = '';
14
  let count = 0;
15
  for (const { segment } of segmenter.segment(text)) {
16
    result += segment;
17
    count += 1;
18
    if (count === max) break;
19
  }
20
  return result;
21
}
22

23
assert.equal(truncateGraphemes('A👨‍👩‍👧‍👦B', 2), 'A👨‍👩‍👧‍👦');
24
assert.equal(truncateGraphemes('é台', 1), 'é');
25
assert.equal(truncateGraphemes('🇹🇼👍🏽', 1), '🇹🇼');
26
assert.equal(truncateGraphemes('abc', 10), 'abc');
27
assert.equal(truncateGraphemes('', 2), '');
28
assert.equal(truncateGraphemes('abc', 0), '');
29
for (const max of [-1, 1.5, NaN, Infinity, '2']) {
30
  assert.throws(() => truncateGraphemes('abc', max), RangeError);
31
}
32
assert.throws(() => truncateGraphemes(null, 2), TypeError);
33
console.log('字素截斷：PASS');