【JavaScript】条件分岐とは?（if・else if・switch）
takahide
初心者がITを楽しむブログ
【JavaScript】文字列の長さを取得したい（length/サロゲートペアの注意点）
takahide
おはようございます。タカヒデです。
本日は、「JavaScriptにおける、『文字列の長さを取得方法』について、『lengthプロパティ』『サロゲートペアの注意点』」を紹介します。
こんな人にオススメ
- JavaScriptにおける『文字列の長さを取得方法』を知りたい
- 『サロゲートペアの注意点』を知りたい
ぜひ本記事を参考にしてください。
文字列の長さ（文字数）を取得
文字列の長さを取得するには『lengthプロパティ』を使用します。
でも私思ったんですよね。
「文字列の取得なんて実業務で使うことあるの？」
はい。調べてみました。
実はこんなところで文字数を取得しているみたいです
- 入力フォームのチェック
- 「名前は20文字以内で入力してください」
- 注文番号
- 「AAA-202601-000123」
うーん。確かに入力フォームの文字数とかは結構見たことありますね。
ということで、記載方法を確認しましょう。
//記載方法
文字列.lengthシンプルですね。
記載例を２つ紹介します。
■記載例①
let test = "こんにちは";
console.log(test.length);
//実行結果：5■記載例②
let text = "My name is Takahide.";
console.log(text.length);
//実行結果:20スペースやピリオドなども含めて文字数としてカウントしていることが分かりますね。
文字数が正しくカウントされないサロゲートペア
「あれ、１文字しか入力していないのに、２文字カウントされている…」
そんな経験ありませんか？
私はありません。
ただし、実際にそのようなことが起こってしまうようです。
よく使われる英数字や漢字は正しく文字数が表示されますが、『絵文字、数学記号』等の一部の文字は実際の文字数と一致しないことがあります。
これが、「サロゲートペア」という文字を使った場合に起こってしまうとのこと。
サロゲートペア
新たにWindowsのUnicode環境で使用できるように追加された文字のこと
以下が実際の文字数と一致しない記載例です。
■事例①
let test1 = "😀";
console.log(test1.length);
//実行結果：2■事例②
let test2 = "𝕏";
console.log(test2.length);
//実行結果：2■事例③
let test3 = "𠮷";
console.log(test3.length);
//実行結果：2あれ、いずれも1文字であるにも関わらず、実行結果は『2』と表示されているではありませんか。
- 絵文字：🤔
- 音楽記号：𝄞
- 古代文字：𓀀
- 数学用アルファベット：𝒜
このような文字を使うと、正しく表示されないようです。
しかし対処法もあります。
サロゲートペアの文字も正しく表示するには以下の記載をします。
//記載方法
[...文字列].length実際に記載例を見てみましょう。
let test4 = "𠮷";
console.log([...test4].length);
//実行結果：1お、正しく『1』が表示されていますね。
こんなこともあるみたいなので注意しましょう。
まとめ
以上が「JavaScriptにおける『文字列の長さを取得方法』および、『lengthプロパティ』『サロゲートペアの注意点』」でした。
まとめ
- 文字列の長さを取得するにはlengthプロパティを使用
- 『サロゲートペア』と呼ばれる一部の文字は実際の文字数と一致しないことがある
この記事が誰かの参考になれば幸いです。
お疲れさまでした。
ABOUT ME
通信会社の企画職で働く30代
非エンジニアでありながら半分趣味でITエンジニアリングやプログラミングを学習中
IT初心者が楽しいと思えるように発信することを目指しています
↓Xもやっているのでフォローしてね
