本記事では、JavaScriptのlengthプロパティで取得する文字数が多い時の原因と対処法について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
先輩くん
より良いコードを書きたい人におすすめの本だよ！
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです！
原因
lengthプロパティで取得する文字数が多い時は、一部の文字が「サロゲートペア」であることが原因です。
本来Unicodeは、16ビットの文字コードですが、16ビットで表せる文字は「65,536文字」と限られているため、全ての文字を16ビットで表すことは出来ません。
そこで登場したのが、サロゲートペアです。サロゲートペアは16ビットのコードを2つ組み合わせて処理する方法です。
通常のUnicodeが1文字につき2バイト使用しますが、サロゲートペアは16ビットのコードを2つ使用していることから、倍の4バイトを必要とします。そのため、1つの文字でもlengthプロパティを使用した際に4バイト分の2文字としてカウントされてしまいます。
対処法
lengthプロパティで取得する文字数が多い時の原因が、サロゲートペアであることが分かったので、今度はサロゲートペアの文字が含まれていても正しい文字数を取得する対処法について見ていきましょう。
サロゲートペアの文字が使用できないため変数の値は通常の文字を代入しています。
let str = "Hello";
str = [...str];
console.log(str); // => ['H', 'e', 'l', 'l', 'o']
console.log(str.length); // => 5サロゲートペアの文字列を含んでいる変数を、配列で囲い先頭に「…」を付けます。すると、文字列は一文字ずつ配列に代入されていくため、サロゲートペアの文字列も1文字としてカウントすることが出来ます。
DMM WEBCAMP 
CodeCamp 
TechAcademy 
