過去2回にわたってJavaScriptを使った文字列操作に関するメソッドについてまとめてきましたが、3回目の今回は文字列の置換や変換をするときに使うメソッドをまとめていきます。文字列自体を変えるというのは、そこまで利用頻度は少ないかもしれませんが、使えると便利ですので覚えておきたいですね。   （こちらの記事もどうぞ） JavaScriptで文字列を扱う時によく使うメソッド＃1【文字を繋げる・切り抜く】 JavaScriptで文字列を扱う時によく使うメソッド＃2【文字数やインデックスを調べる・文字を検索する】  

String.replace

文字を変えるメソッドの中でも登場頻度が高い「String.replace()」は特定の文字を指定した文字に置換することができます。対象の文字列に対して実行し、第一引数には置換対象となる文字列を、第二引数には置換後の文字を指定します。 【JavaScript】

const before = '私はスーパーでリンゴを買いました。';
const pattern = 'リンゴ';
const after = before.replace(pattern, 'ミカン');
console.log(after);

  コンソールで確認してみますと、対象の文字を検索し、引数に指定した文字に置換されているのが確認できます。 【console】

"私はスーパーでミカンを買いました。"

  置換対象の検索には正規表現を用いることも可能です。下記ではよく使われるパターンとして改行コードをHTMLの改行タグに置換するケースになります。置換対象の文字を正規表現を使っています。

const before = '改行前テキスト\n改行後テキスト';
const regexp = /\n/g;
const after = before.replace(regexp, '<br>');
console.log(before);
console.log(after);

  文字列で検索対象を指定した時と同じく、正規表現でも検索して置換できることが確認できます。 【console】

"改行前テキスト
改行後テキスト"
"改行前テキスト<br>改行後テキスト"

   

String.toUpperCase / String.toLowerCase

英字の場合には大文字と小文字の区別があります。「String.toUpperCase()」と「String.toLowerCase()」を使うとそれぞれ大文字・小文字の表記に文字列を揃えることができます。このときに引数は不要です。 【JavaScript】

const beforeToUpperCase = 'SHINYA OGAWA';
const beforeToLowerCase = 'Shinya Ogawa';
console.log(beforeToUpperCase.toUpperCase());
console.log(beforeToLowerCase.toLowerCase());

  大文字と小文字が混在していても、それぞれ大文字と小文字に統一されているのがわかります。 【console】

"SHINYA OGAWA"
"shinya ogawa"

   

String.repeat

続いては少し変り種ですが「String.repeat()」のメソッドを使うと、対象となる文字を繰り返すことができ、文字列としてまとめて返します。引数には文字を繰り返す回数を指定します。 【JavaScript】

const text = ' yeah!!!'
console.log(`Everybody say,${text.repeat(5)}`);

  文字を繰り返して出力する場合にはとても便利ですが、あまりそういった場面はなさそうですね、、 【console】

"Everybody say, yeah!!! yeah!!! yeah!!! yeah!!! yeah!!!"

   

String.split

最後のメソッドは文字列を特定の文字で区切って、それを配列に変換する「String.split()」です。対象となる文字列に対してメソッドを実行し、引数には区切る対象となる文字を指定します。引数を省略した場合には半角スペースが区切り文字の対象となります。 【JavaScript】

const before = '2020/09/02';
const after = before.split('/');
console.log(after);

  コンソールで確認してみると区切り文字で区切られた値が、それぞれ配列の値に変換されているのがわかります。 【console】

["2020", "09", "02"]

  過去記事「JavaScriptで配列を扱う時によく使うメソッド＃10【配列を文字列にする・多次元配列をフラットにする】」でも紹介していますが、配列を文字列に変換する「Array.join()」を使うことで、文字列から配列に変えてから置換することができます。

const before = '2020/09/02';
const convert = before.split('/');
const after = convert.join('-');
console.log(after);

  日付のフォーマットを変換する時などに使えます。値を配列として保持しているので、配列の値と文字列の値と両方扱いたいときにはちょうど便利ですね。 【console】

"2020-09-02"

   

まとめ

【文字列にある文字を置換する】 String.replace( pattern, string );   【文字列を大文字もしくは小文字で揃える】 String.toUpperCase(); String.toLowerCase();   【特定の文字を繰り返して文字列にする】 String.replace( times );   【文字列を特定の文字で区切り配列にする】 String.split( separator );  

---

  今回もJavaScriptで文字列操作をするときに使うメソッドについてまとめてみました。文字列操作のメソッドは単独で使うよりも、他の処理と組み合わせて使うことが多いかと思います。これまで紹介したメソッドを使うことでいろんなケースに対応できるかと思いますのでぜひ覚えておきたいですね。