先生と生徒の会話形式で理解しよう

生徒

「先生、文字列操作をしているとよくエラーが出るんですが、どうしてでしょうか？」

先生

「文字列操作で起こるエラーにはいくつかパターンがあります。初心者がよくつまずく部分を整理して対処法も一緒に紹介しましょう。」

生徒

「どんなエラーが多いんですか？」

先生

「例えば、undefinedやnullに対して操作をしてしまった場合や、文字列のインデックス指定ミスなどがあります。」

1. undefinedやnullにアクセスしてしまう

JavaScriptでは、文字列がundefinedやnullの状態でlengthやcharAtを使うとエラーになります。


let str;
console.log(str.length); // エラー


Uncaught TypeError: Cannot read property 'length' of undefined

対処法：文字列が定義されているか確認してから操作します。


let str = "Hello";
if (str) {
  console.log(str.length); // 5
}

2. インデックスの範囲外を指定する

文字列のインデックスは0から始まります。存在しない位置にアクセスするとundefinedが返ります。


const str = "JavaScript";
console.log(str[20]); // undefined


undefined

対処法：文字列の長さをlengthで確認してからアクセスします。


const str = "JavaScript";
if (str.length > 5) {
  console.log(str[5]); // c
}

splitは文字列を指定した区切り文字で分割しますが、空文字や間違った文字を指定すると予期しない結果になることがあります。


const str = "Hello World";
console.log(str.split("")); // 文字ごとの配列
console.log(str.split(",")); // ["Hello World"]


["H","e","l","l","o"," ","W","o","r","l","d"]
["Hello World"]

対処法：分割したい文字を正しく指定し、空文字の場合の挙動を理解しておくことが大切です。

replaceはデフォルトでは最初に見つかった文字列だけを置き換えます。全て置換したい場合は正規表現の/gフラグを使います。


let str = "abc abc";
console.log(str.replace("abc", "xyz")); // xyz abc
console.log(str.replace(/abc/g, "xyz")); // xyz xyz


xyz abc
xyz xyz

対処法：全置換する場合は正規表現を使い、意図しない部分だけ置換されないように注意します。

trimは文字列型でしか使えません。数値やnullに対して使うとエラーになります。また、文字列結合で数値と文字列を混ぜる場合は意図通りの型変換がされるか確認が必要です。


let num = 123;
console.log(num.trim()); // エラー


Uncaught TypeError: num.trim is not a function

対処法：文字列型かどうかを確認するか、String()で変換してから操作します。


let num = 123;
console.log(String(num).trim()); // "123"

文字列操作のエラーを避けるには、次のポイントを押さえましょう。

これらの基本を押さえておくと、文字列操作のエラーを大幅に減らせます。