JavaScript

【JavaScript】lengthプロパティで取得する文字数が多い時の原因と対処法

本記事では、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文字としてカウントされてしまいます。

先輩くん

サロゲートペアの文字を知りたい方は、こちらの「闘うITエンジニアの覚え書き」をご参照ください。

対処法

lengthプロパティで取得する文字数が多い時の原因が、サロゲートペアであることが分かったので、今度はサロゲートペアの文字が含まれていても正しい文字数を取得する対処法について見ていきましょう。

先輩くん

サロゲートペアの文字が使用できないため変数の値は通常の文字を代入しています。

let str = "Hello";
str = [...str];
console.log(str); // => ['H', 'e', 'l', 'l', 'o']
console.log(str.length); // => 5

サロゲートペアの文字列を含んでいる変数を、配列で囲い先頭に「…」を付けます。すると、文字列は一文字ずつ配列に代入されていくため、サロゲートペアの文字列も1文字としてカウントすることが出来ます。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村