本記事では、JavaScriptのlengthプロパティで取得する文字数が多い時の原因と対処法について解説しています。
JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
メリット
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
全プログラマー必見！
変数名/関数名にもう悩まない！
変数名/関数名にもう悩まない！
リーダブルコード
メリット
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 （2023/07/23 02:48時点 | Amazon調べ）
ポチップ
目次
原因
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文字としてカウントすることが出来ます。
