本記事では、JavaScriptのlengthプロパティで取得する文字数が多い時の原因と対処法について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
原因
lengthプロパティで取得する文字数が多い時は、一部の文字が「サロゲートペア」であることが原因です。
本来Unicodeは、16ビットの文字コードですが、16ビットで表せる文字は「65,536文字」と限られているため、全ての文字を16ビットで表すことは出来ません。
そこで登場したのが、サロゲートペアです。サロゲートペアは16ビットのコードを2つ組み合わせて処理する方法です。
通常のUnicodeが1文字につき2バイト使用しますが、サロゲートペアは16ビットのコードを2つ使用していることから、倍の4バイトを必要とします。そのため、1つの文字でもlengthプロパティを使用した際に4バイト分の2文字としてカウントされてしまいます。
サロゲートペアの文字を知りたい方は、こちらの「闘うITエンジニアの覚え書き」をご参照ください。
対処法
lengthプロパティで取得する文字数が多い時の原因が、サロゲートペアであることが分かったので、今度はサロゲートペアの文字が含まれていても正しい文字数を取得する対処法について見ていきましょう。
サロゲートペアの文字が使用できないため変数の値は通常の文字を代入しています。
let str = "Hello";
str = [...str];
console.log(str); // => ['H', 'e', 'l', 'l', 'o']
console.log(str.length); // => 5
サロゲートペアの文字列を含んでいる変数を、配列で囲い先頭に「…」を付けます。すると、文字列は一文字ずつ配列に代入されていくため、サロゲートペアの文字列も1文字としてカウントすることが出来ます。