Intl.Segmenterを使って絵文字を含んだ文字列のlengthを取得する ✏️

かつて、文字列を配列に分割代入することで絵文字を含んだ文字列のlengthを簡易的に取得したことがありました。

blog.kimizuka.org

サロゲートペアに対して、String.prototype.lengthで文字列の長さを取得しようとすると、うまくいかないときもありますが、

const text = '😊';

console.log(text.length); // => 2

const text = '😊';

console.log([ ...text ].length); // => 1

一度配列に分割代入するとうまくいくケースもあるという簡易的な方法です。

あくまで簡易的な方法なので、うまくいかない絵文字も存在します。

const text = '✌️';

console.log([ ...text ].length); // => 2

今回は、Intl.Segmenterを使って、もうちょっと正確に文字列の長さを取得してみます。

developer.mozilla.org

ソースコード

function getJaTextLength(text) {
  const segmenter = new Intl.Segmenter('ja-JP', {
    granularity: 'grapheme'
  });

  return [ ...segmenter.segment(text) ].length;
}

1. Intl.Segmenterオブジェクトを取得
2. segmentメソッドでSegmentsを取得
3. Segmentsを配列に分割代入
4. 配列のlengthを取得

という流れで文字列の長さを返します。

つかいかた

getJaTextLength('こんにちは'); // -> 5
getJaTextLength('😊'); // -> 1
getJaTextLength('✌️'); // -> 1

単純に配列に分割代入するだけでは正しい長さにならなかった✌️も正しい長さを取得できます。

DEMO