JavaScriptで文字列の長さを取得する方法

文字列の長さを知ることは、プログラムにおいてよく行われる操作です。特にフォームのバリデーションやテキストのカットオフなど、多岐にわたるシナリオで必要になります。本記事では、JavaScriptを用いて文字列の長さを取得する方法を詳細に解説します。

スポンサーリンク

length プロパティの基本

var str = "こんにちは";
console.log(str.length); // 出力: 5

length プロパティは、最も基本的でシンプルな方法です。これを使えば、指定した文字列の長さ、すなわちその中の文字数を返してくれます。このプロパティは読み取り専数字として簡単に取得することができます。

String.prototype.length の利用

var str = new String("こんにちは");
console.log(str.length); // 出力: 5

String.prototype.length プロパティも同じく、文字列の長さを取得する方法です。new String() コンストラクタを使って文字列オブジェクトを生成する場合にも、length プロパティは利用可能です。

注意点 サロゲートペアの扱い

var emoji = "😀";
console.log(emoji.length); // 出力: 2

JavaScript の length プロパティは、サロゲートペアを2つの個別の文字として数えます。例えば、絵文字は通常、サロゲートペアとしてエンコードされるため、length プロパティはそれを2文字として数えます。これには注意が必要です。

ポイント length は文字数を返す

length プロパティは、文字列の「文字数」を返します。これはバイト数ではありません。日本語や他の多バイト文字セットを使っている場合、これは非常に重要な点です。

サンプルコード

これらのサンプルコードは、JavaScriptで文字列の長さを取得するいくつかの一般的なシナリオをカバーしています。特に、サロゲートペアを考慮した文字数のカウントは、現代のWeb開発において重要なテーマですので、注意が必要です。

単純な文字列の長さを取得

この例では、普通の文字列の長さを取得しています。

var greeting = "こんにちは";
console.log(greeting.length); // 出力: 5

Stringオブジェクトの長さを取得

この例では、new String() コンストラクタを使って作成したStringオブジェクトの長さを取得しています。

var greetingObject = new String("こんにちは");
console.log(greetingObject.length); // 出力: 5

サロゲートペアが含まれる文字列の長さを取得

この例では、サロゲートペア(例えば絵文字)が含まれる文字列の長さを取得しています。

var textWithEmoji = "こんにちは😀";
console.log(textWithEmoji.length); // 出力: 6

サロゲートペアを考慮した文字列の長さを取得

この例では、サロゲートペアを1文字としてカウントするための関数を定義し、それを使って文字列の長さを取得しています。

function countCharacters(str) {
    return [...str].length;
}

var textWithEmoji = "こんにちは😀";
console.log(countCharacters(textWithEmoji)); // 出力: 5

このcountCharacters関数では、ES6のスプレッド演算子を使って文字列を分解し、各文字(サロゲートペアを含む)を要素とした配列を生成しています。この配列の長さを返すことで、サロゲートペアを1文字としてカウントします。

文字列が空(長さが0)かどうかを判定

この例では、文字列が空かどうかを判定しています。

var emptyString = "";
if (emptyString.length === 0) {
    console.log("この文字列は空です。"); // この文字列は空です。
} else {
    console.log("この文字列は空ではありません。");
}

よくある質問(FAQ)

Q. lengthが想定と違う数値になる場合の原因は何ですか?
A. 絵文字や一部の漢字(CJK統合漢字拡張等)はUTF-16のサロゲートペアで表現されるため、見た目1文字でもlengthが2になります。例:"?".length === 2。見た目の文字数を数えるには[..."?"].length(スプレッド構文)またはArray.from("?").lengthを使います。
Q. 文字列が空かどうかをlengthで判定するのは良い方法ですか?
A. str.length === 0は空文字列のチェックとして正確ですが、nullやundefinedに対してはエラーになります。安全なチェックは!str(nullやundefinedも含む)かstr == null || str.length === 0。空白のみも空扱いするには!str?.trim()が便利です。
Q. 文字列の長さを最大値でバリデーションするにはどうすればよいですか?
A. if(str.length > maxLength)でチェックできます。フォームバリデーションでは<input maxlength="100">のHTML属性でも制限できます。サロゲートペアを正確にカウントする場合は[...str].length > maxLengthを使います。

まとめ

JavaScriptで文字列の長さを取得するには、length プロパティが一番シンプルで効率的な方法です。しかし、サロゲートペア(例えば絵文字)が含まれている場合には注意が必要です。この場合、length プロパティは期待した値と異なる場合があるため、実際の使用状況に応じて対処が必要です。

文字列の長さを操作する基本的なテクニックを理解し、それを活用することで、より効果的なJavaScriptコーディングが可能になります。