JavaScriptのString.prototype.replaceメソッドについて現役エンジニアが解説【初心者向け】

JavaScriptのString.prototype.replaceメソッドについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

 

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まるでしょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

 

目次

• String.prototype.replaceメソッドとは
• String.prototype.replaceメソッドの使い方
• 実際に使ってみよう
• まとめ

 

String.prototype.replaceメソッドとは

String.prototype.replaceメソッドは、文字の並びを表すStringオブジェクトのメソッドの1つです。

replaceメソッドの処理内容は、文字列の置換をおこない置換した文字列を返するものです。

引数の渡し方によって、置換の内容を文字パターンに対応させることや条件をつけるなど、柔軟な置換もできます。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

String.prototype.replaceメソッドの使い方

文字列、または文字列を格納した変数に対して、.replace()と記述することで使えます。

引数は下記の2つです。

1、置換の対象にする文字列、または置換する文字パターン（RegExpオブジェクト）
2、置換する文字列、または置換処理をする関数

 

実際に使ってみよう

プログラムコードとして、第1引数に「置換対象の文字列」、第2引数に「置換する文字列」を指定した例を見ていきましょう。

let string = 'あいうえお＠かきくけこ'; 
let replaceString = string.replace('＠', '＊');  //あいうえお＊かきくけこ

これで＠が＊に置き換わった文字列が、変数replaceStringに格納されました。

変数stringに格納されている文字列には変化はありません。

replaceメソッドは、あくまで置換した文字列を返すメソッドです。

置換の対象、および置換する文字の指定は1文字でなくとも同じように可能です。

 

下記のように文字列を指定しても置換できます。

let string = 'あいうえお＠かきくけこ'; 
let replaceString = string.replace('かきくけこ', 'さしすせそ'); //あいうえお＠さしすせそ

ここで注意したいこととして、最初に一致したものだけが置換されます。

例えば下記のように＠が3つ含まれた文字列を、同じように＊に置換すると最初の1つだけが置換されることが確認できるでしょう。

let string = 'あいうえお＠か＠き＠くけこ'; 
let replaceString = string.replace('＠', '＊');  //あいうえお＊か＠き＠くけこ

置換の対象の文字を全て置換したい場合は、第1引数を文字パターンで全部を対象にするかreplaceAllというメソッドを使いましょう。

 

第1引数に文字パターンを使う例は以下のようになります。

let string = 'あいうえお1か23き4くけこ'; 
let replaceString = string.replace(/d/g, '＊');  //あいうえお＊か＊＊き＊くけこ

文字パターンを表すRegExpオブジェクトによって、「数字全て」を指定しました。

 

最後に第2引数に関数を使う例として、数字の2だけを＊に置き換える方法を紹介します。

let string = 'あいうえお1か23き4くけこ'; 
let replaceString = string.replace(/d/g,  match =>  match === '2'? '＊' : match );  //あいうえお1か＊3き4くけこ

第2引数を関数にすることで、置換の対象の中から数字の2だけを置き換える条件を実現しました。

アロー関数に慣れていない方は、下記のFunction宣言でも同じ意味になるので覚えておきましょう。

let string = 'あいうえお1か23き4くけこ'; 
let replaceString = string.replace(/d/g,  replaceAsterisk ); //あいうえお1か＊3き4くけこ

function replaceAsterisk(match){
  if(match === '2'){
    return '＊';
  }else{
    return match;
  }
}

 

まとめ

Stringオブジェクトのreplaceメソッドを紹介しました。

単純な置換処理なら、引数にそのまま文字列を渡してください。

置換の対象が複雑だったり置換の条件があるような場合は、引数にパターンを表すRegExpオブジェクトや関数を組み合わせて渡してください。

 

執筆してくれたメンター

横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。 TechAcademyジュニアのゲームアプリコースを担当しています。

 

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。