この記事の目次 開く・閉じる
😀はlengthで2、UTF-8で4バイト
JavaScriptの文字列にlengthを使うと、😀は2になります。今回の自作例ではコードポイントと書記素はともに1、UTF-8は4バイトでした。lengthが返すのはUTF-16のコード単位数です。目に見える文字の個数や、UTF-8に変換した容量とは区別します。
家族の絵文字👨👩👧👦では、lengthが11、コードポイントが7、書記素が1、UTF-8が25バイトになりました。eと結合アクセントを続けた入力では順に2・2・1・3です。「1文字まで」という仕様だけでは、どの値で判定するか決まりません。
入力と結果を対応させる
- 下の実験で「数える文字」に😀を入力します。
- length: 2、コードポイント: 1、書記素: 1、UTF-8: 4バイトと表示されることを確認します。
- 「家族の絵文字を入れる」を押し、11・7・1・25へ変わることを確かめます。
- 入力欄を空にすると4つとも0になります。受付条件を考えるときは空欄も区別します。
自作例はlength、文字列の展開、Intl.Segmenter、TextEncoderを並べています。String.lengthの説明とTextEncoder.encodeの説明を根拠に、同じ文字列をブラウザで計測しました。
s.length
[...s].length
[...new Intl.Segmenter("ja", { granularity: "grapheme" }).segment(s)].length
new TextEncoder().encode(s).length見た目の個数と保存容量、どちらを制限する？
名前欄の見た目に近い個数を扱いたいなら書記素、UTF-8の容量を制限したいならバイト数を検討します。下の例はIntl.Segmenterを使い、利用中のブラウザの分割結果を表示します。Unicodeやブラウザの版が変わる影響まで今回保証するものではありません。
サンプルは文字を数えるだけで、入力を切り詰めません。lengthの値だけを見て文字列を途中で切ると、絵文字の一部を分断する場合があります。今回は切り詰め処理やサーバー側の検証を実装していません。
手軽にUTF-8の容量を見るならbyte counterの実操作記事へ進めます。入力を共有URLに含める機能には注意が必要です。自作例とZIPのコードはCC0で、外部ライブラリは追加していません。
確認日：2026年10月28日。Xの最近の元投稿・投稿日時・反響は確認できず、流行は未確認です。公式資料と今回の実操作を根拠にしています。PCと375px幅のブラウザで検証し、スマホ実機・読み上げ・全ブラウザは未確認です。