[typescript]String().lengthプロパティの使い方と注意点

Index

lengthプロパティとは

lengthプロパティは、文字列内の文字数を取得するために使われます。これは配列でも同様に機能し、文字列や要素の数を正確に把握するために非常に役立ちます。しかし、開発者が誤解しがちな部分もあるため、注意が必要です。

基本的な使い方

lengthはプロパティなので、関数のように呼び出す必要はなく、直接アクセスして値を取得します。

const str: string = "Hello, TypeScript!";
console.log(str.length);  // 出力: 18

1 2	const str: string = "Hello, TypeScript!"; console.log(str.length); // 出力: 18

上記のコードでは、strの文字数を出力しています。この場合、空白や記号、英数字すべてがカウントされ、18という結果が返されます。

よくある間違い

lengthを関数のように扱う

lengthはプロパティであり、関数ではありません。以下のように関数のように呼び出すのは誤りです。

// 間違った例
const str: string = "Hello";
console.log(str.length());  // エラー: Property 'length' does not exist on type 'string'.

// 間違った例

const str: string = "Hello";

console.log(str.length()); // エラー: Property 'length' does not exist on type 'string'.

マルチバイト文字の扱い

JavaScriptのlengthは、文字列をUTF-16で扱います。そのため、サロゲートペアを含む文字（例えば絵文字や一部の多言語文字）では、正確にカウントされない場合があります。例えば、日本語の文字や絵文字が2文字分とカウントされることがあります。

const emojiStr: string = "👨‍👩‍👦";
console.log(emojiStr.length);  // 出力: 7 (実際には3文字)

1 2	const emojiStr: string = "👨‍👩‍👦"; console.log(emojiStr.length); // 出力: 7 (実際には3文字)

これはサロゲートペアの関係で、1つの絵文字が複数のコードユニットで表現されているためです。文字数を正確に数えるには、Array.from()を使うと解決できます。

const actualLength = Array.from(emojiStr).length;
console.log(actualLength);  // 出力: 3

1 2	const actualLength = Array.from(emojiStr).length; console.log(actualLength); // 出力: 3

注意点: マルチバイト文字と正確なカウント

特に日本語や中国語などのマルチバイト文字を扱う場合、文字列の長さが期待通りにならないことがあります。これはlengthがUTF-16コードユニットを基準にしているためです。絵文字や特殊なシンボルも1文字ではなく、2〜4文字としてカウントされることがあります。

配列でのlengthプロパティ

文字列だけでなく、配列でもlengthプロパティが利用できます。配列の場合は、その中に含まれる要素の数を返します。

const arr: number[] = [1, 2, 3, 4, 5];
console.log(arr.length);  // 出力: 5

1 2	const arr: number[] = [1, 2, 3, 4, 5]; console.log(arr.length); // 出力: 5

lengthは、配列の要素数を簡単に知るために便利なプロパティです。空の配列の場合は0を返します。

実践的な使い方

フォームバリデーションやユーザー入力の検証でよく使われます。例えば、パスワードの最低文字数チェックや、名前フィールドの文字数制限などで有効です。

const password: string = "pass123";

if (password.length < 8) {
  console.log("パスワードは8文字以上必要です");
} else {
  console.log("パスワードの長さは問題ありません");
}

const password: string = "pass123";

if (password.length < 8) {

console.log("パスワードは8文字以上必要です");

} else {

console.log("パスワードの長さは問題ありません");

}

このように、ユーザー入力に対して最低文字数をチェックすることができます。

バグの防止策

• マルチバイト文字のカウント: 日本語や絵文字など、1文字が複数のコードユニットで表現される場合、lengthでのカウントに注意が必要です。Array.from()やspread operatorを使って正確にカウントするのが推奨されます。

• 誤ったプロパティの使用: length()のように関数として扱わないこと。正しくはstr.lengthのようにプロパティとしてアクセスします。

まとめ

lengthプロパティは、文字列や配列の長さを取得するための基本的かつ重要なプロパティです。しかし、マルチバイト文字を含む場合やプロパティを誤って関数のように扱うと、意図しない挙動やエラーが発生します。特に、絵文字や日本語のようなマルチバイト文字列に対して正確なカウントをする際には、注意が必要です。