In 'n' Out

知識を取り込み、そして発信する

文字列操作

なぜ文字列操作が必要か

文字列は数値と違い、さまざまな操作が必要になります。
変換、加工、置換など、普段Excelで行っているような処理も、JavaScriptでは専用のメソッドを使って行います。
文字列操作が扱えるようになると、入力内容の整形や判定ができるようになり、フォーム処理や画面操作など、実務での活用の幅が広がります。

文字の変換

文字列を取得しても、そのままでは正しく判定できない場合があります。
特に、大文字と小文字が混在していると、比較結果が意図しないものになることが多々あります。
そこで使用するのが、文字列を小文字や大文字に変換するメソッドです。

構文

//小文字変換
文字列（変数や配列の要素）.toLowerCase();
//大文字変換
文字列（変数や配列の要素）.toUpperCase();

toLowerCase・toUpperCaseはメソッドで、アルファベットを文字変換します。
toLowerCaseはすべて小文字に、toUpperCaseはすべて大文字に変換します。

コード例

//convertCase.js
const arr = ['GOOD MORNING', 'hello', 'Good Bye'];
const convert = [];
for(let i=0; i<arr.length; i++){
    if(i === 0){
        convert[i] = arr[i].toLowerCase();
    }else if(i === 1){
        convert[i] = arr[i].toUpperCase();
    }else{
        convert[i] = arr[i].toUpperCase();
    }
}

alert(convert);

動作例

※このボタンは動作確認用です

配列から文字を取得して、それぞれ変換しました。
インデックスの0番目はtoLowerCaseで小文字に変換し、1番目はtoUpperCaseで大文字に変換しました。
最後のインデックスは大文字と小文字を混在した文字をtoUpperCaseで大文字に変換しました。
このように大文字と小文字が混在した場合は、toUpperCaseだとすべて大文字に、toLowerCaseを使った場合はすべて小文字に変換されます。
そのため、頭文字だけを大文字にするといったことはこのメソッドだけではできません。

文字の成形

文字列に余計な空白があると、意図した挙動にならないことがあります。
少量であれば手作業で削除することもできますが、数が増えると見落としが発生しやすくなります。
そこで、空白を削除するメソッドがJavaScriptには用意されています。

構文

文字列（変数や配列の要素）.trim();

trimはメソッドで、文字列の前後の空白を削除します。
空白は半角・全角どちらも対象になります。

コード例

//trim.js
const arr = [' ab ', ' d', 'e ', '　あ　い　'];
const trimAfter = [];

for (let i = 0; i < arr.length; i++) {
    trimAfter[i] = arr[i].trim();
    alert(arr[i].length - trimAfter[i].length + '文字分スペースを削除しました');
}

動作例

※このボタンは動作確認用です

配列から文字列を取得して、それぞれ空白を削除しています。
インデックスの2番目までは半角スペース、最後の要素は全角スペースですが、削除された文字数をalertで確認できます。
ただし、最後の文字列には途中にも空白が含まれていますが、これは削除されません。
trimは文字列の前後のみを対象とするため、途中の空白はそのまま残ります。
では、途中の空白も削除したい場合どうすればいいでしょうか？

文字の加工

特定の文字を別の文字に置き換えたり、不要な文字を削除したりする場合があります。
また、入力内容を統一したり、特定のルールに合わせて文字列を整えることもできます。
このような処理は、データの判定や検索の精度を高めるために重要です。

構文

文字列（変数や配列の要素）.replace(対象文字列, 置換文字);

replaceはメソッドで、対象文字列と置換文字を指定して変換します。
replaceは一致した最初の1箇所のみが置換されます。
そのため、同じ文字が複数含まれている場合でも、すべてが置換されるわけではありません。

コード例

//replace1.js
const arr = ['6時　起床', '8時　朝食', '9時　出勤'];
const replaceStr = [];

for (let i = 0; i < arr.length; i++) {
    replaceStr[i] = arr[i].replace('時', ':00');
}
       
alert(replaceStr);

動作例

※このボタンは動作確認用です

配列から文字列を取得して、それぞれ「時」を「:00」に置き換えています。
特に入力フォームのチェックで、表記を変えたい場合にreplaceが有効です。
ただし、ミスタイプの修正のように不確定な文字列を想定した用途には向いていません。
あらかじめ決まった文字やパターンを変換する用途で使用するのが基本です。

コード例

//replace2.js
const str = 19956;

alert(String(str).replace(9, 2));

動作例

※このボタンは動作確認用です

replaceは文字列に対して使用するメソッドです。
そのため、数値を変換する場合は一度文字列に変換する必要があります。
まず、strをString型に変換し、変換した文字列の9を2にreplaceで置換します。
ただし、alertで表示されたのは12956です。
replaceは一致した最初の1箇所のみが置換されるためです。
なお、ここでは置換結果だけの解説なので、数値に戻しません。
もし数値に戻すならば、再度Numberで型変換する必要があります。
すべて置換したい場合は、別の方法を使用する必要があります。

コード例

//replace3.js
const arr = ['間の　　空白', '間の  空白', '間の　 空白'];
const replaceStr = [];

for (let i = 0; i < arr.length; i++) {
    replaceStr[i] = arr[i].replace('　', '');
}
       
alert(replaceStr);

動作例

※このボタンは動作確認用です

trimでは文字列の前後の空白を削除しました。
replaceでは途中の空白を置換することが可能です。
わかりにくいとは思いますが、それぞれ異なる空白を含めた文字列を用意しています。
全角空白や半角空白が混在している状態です。
置換対象は全角空白を空文字に置換します。
結果として、空白がすべて削除されるわけではありません。
replaceは一致した最初の1箇所のみが対象となるため、複数の空白があっても1つしか置換されません。
また、全角と半角の空白は別の文字として扱われます。
空白であればすべて空文字（削除）するにはreplaceだけでなく、正規表現が必要になります。

文字の抽出・分解

文字列の中から特定の部分だけを取り出したり、区切りごとに分けたりしたい場合があります。
例えば、カンマやスペースで区切られたデータを分割したり、先頭や途中の一部分だけを取り出すといった処理です。
このように文字列を分解・抽出することで、必要な情報だけを効率よく扱えるようになります。

構文

//文字の抽出
文字列（変数や配列の要素）.slice(開始位置, 終了位置);
//文字の分解
文字列（変数や配列の要素）.split(区切り文字);

sliceは配列のメソッドでも登場しましたが、文字列に対してインデックスの開始位置～終了位置の手前までの文字列を抽出します。
splitはメソッドで、指定した区切り文字をもとに文字列を分割し、配列として取得します。
区切り文字で分けられたそれぞれの文字列が、配列の要素として格納されます。

コード例

//sliceSplit.js
const arr = ['今日は、晴れです', '今日は、雨です', '今日は、曇りです'];
const sliceAfter = [];

for (let i = 0; i < arr.length; i++) {
    sliceAfter[i] = arr[i].slice(4, 10);
    alert(sliceAfter[i]);
}
       
for (let i = 0; i < arr.length; i++) {
    alert(arr[i].split('、'));
}

動作例

※このボタンは動作確認用です

配列から文字列を取得し、それぞれ処理を行っています。
最初のfor文では、sliceを使って文字列の一部を取り出しています。
slice(4, 10)と指定することで、インデックス4から9までの文字が抽出されます。
この例では「晴れです」「雨です」「曇りです」といった部分が新しい配列に格納されます。
終了位置は数えるのが大変な場合、文字列の長さより大きい値を指定しても問題ありません。
その場合は、文字列の最後までが対象となります。
次のfor文では、splitを使って文字列を「、」で分割しています。
その結果、「今日は」と「晴れです」のように2つの文字列に分かれ、配列として取得されます。
splitは指定した区切り文字ごとに分解されるため、文章の構造を分けて扱いたい場合に便利です。
また、splitは元の文字列を変更せず、分解した結果を新しく返します。
そのため、分解した結果を使い回す場合は、変数に代入しておく必要があります。
このように、sliceは文字列の一部を取り出す処理、splitは文字列を区切って分解する処理として使い分けることができます。

文字の判定

文字列の中に特定の文字が含まれているかを確認したり、先頭や末尾が特定の内容かどうかを判定したい場合があります。
例えば、入力された文字列に特定のキーワードが含まれているかを調べたり、決まった形式で始まっているかを確認する場面です。
このように文字列の内容を判定することで、条件分岐を使った処理がより柔軟に行えるようになります。

構文

//文字が含まれているか
文字列（変数や配列の要素）.includes(検索文字, 開始位置);
//文字が先頭にあるか
文字列（変数や配列の要素）.startsWith(判定文字);
//文字が末尾にあるか
文字列（変数や配列の要素）.endsWith(判定文字);

includesは配列のメソッドで登場しましたが、文字列に対して検索文字が存在するか開始位置から判定します。
startsWithはメソッドで、判定文字が先頭に存在するかを判定します。
endsWithもメソッドで、判定文字が末尾に存在するかを判定します。
これらはいずれも真偽値で判定されます。

コード例

//judgement.js
const arr = ['test@test.co.jp', '3-1234-5678', 'test.jpg'];

alert(arr[0].includes('@', 0));
alert(arr[1].startsWith('0'));
alert(arr[2].endsWith('.jpg'));

動作例

※このボタンは動作確認用です

入力された情報を配列に格納されたパターンを想定しました。
メールアドレスは@マークが必須なため、includesで0番目以降に@マークが含まれているか判定しています。
電話番号は0から始まるため、startsWithで0から始まっているか判定しています。
画像はjpgで指定していれば.jpgで終わるため、endsWithで.jpgで終わっているか判定しています。
このように簡易ではありますが、確認ができるようになります。

ここまで文字の操作メソッドを見てきましたが、さらに精密に判定したり、加工するには正規表現が必要になってきます。
文字列操作で成形してから、正規表現でさらに厳密に判定を行うことができます。
まずは、これらのメソッドを十分理解することが重要です。