JavaScript - 文字列の長さを取得（サロゲートペア対策を含む）

JavaScriptで文字列の長さを取得するには、 Stringオブジェクトのlengthプロパティを使います。

「変数名.length」や「文字列リテラル.length」で取得できます。

また、サロゲートペア対策として、 スプレッド演算子（...）を使った文字列の長さを取得する方法も紹介します。

lengthプロパティの使い方

変数名.length

lengthプロパティを使って文字列の長さを取得するには、 次のように、「変数名.length」で取得できます。

str = 'abcde';

str = str.length; // 5

文字列リテラル.length

次のように「文字列リテラル.length」という記述でも取得できます。

console.log('abcde'.length); // 5

console.log('あいうえお'.length); // 5

通常のプログラミングでは、「変数名.length」を使うことの方が多いと思います。

スプレッド演算子＋lengthプロパティ

サロゲートペアの問題

サロゲートペアという特殊な文字を含む場合、 文字列の長さはうまく取得できません。

例えば、「𩸽」（ホッケ）の場合、lengthプロパティで長さを取得すると「2」となります。

console.log('𩸽'.length); // 2

console.log('𩸽を食べる'.length); // 6

スプレッド演算子＋lengthで解決

サロゲートペアを含んだ問題を解決し、 正しい文字列の長さを取得するには、 スプレッド演算子（...）＋lengthプロパティを使います。

スプレッド演算子（...）を使って文字列を配列に分割し、 配列の長さを数えています。

console.log([...'𩸽'].length); // 1

console.log([...'𩸽を食べる'].length); // 5

文字列リテラルではなく、変数を使う場合も同様に記述できます。

str = '𩸽を食べる';

console.log([...str].length); // 5

この方法だと、簡単にサロゲートペアの文字も正しく1文字と認識できます。