VIDEO LESSON

JavaScriptのString.prototype.replace()の使い方：引数・戻り値・実例と注意点の解説動画

再生時間 8:01動画を別のタブで開く ↗

動画の字幕・文字起こしを読む

再生中の字幕を濃い黒で表示し、一番上に追従します。字幕の行を選ぶと、その位置から再生できます。

0:00こんにちは。
0:00今回はリプレイスを紹介します。
0:03これは、文字列の中で一致した部分を、別の文字列に置き換えるメソッドです。
0:09前回のリプレイスオールが一致するすべてを置き換えたのに対して、リプレイスは検索文字列の場合、
0:14最初の一致だけを置き換えます。
0:19この動画では、書き方と引数と戻り値、記事の基本例である定型文の名前差し替え、
0:24最初の一個だけが変わる境界例、正規表現のジーフラグで全件置換する方法まで、
0:29実行結果と一緒に学びます。
0:34一個だけ変えたい場面に、ぴったりの道具です。
0:37置換は文字列処理の基本ですので、仕組みをしっかり押さえましょう。
0:43まず動作環境を確認します。
0:44リプレイスはジャバスクリプトの初期からある、とても古くから使える文字列メソッドです。
0:49クロームでは一以降、エッジでは十二以降、ファイアーフォックスでは一以降、
0:53サファリでは一以降で使えます。
0:56ノード・ジェイエスではゼロ・十・ゼロ以降に対応しています。
0:59記事の互換性情報はエムディーエヌのデータに基づく目安ですが、対応範囲が非常に広いため、
1:03通常は環境を心配せず使えます。
1:06追加の読み込みは不要で、空文字列にも関数として備わっていることを実機で確認済みです。
1:12迷ったときは、実際に使う環境で小さなコードを試すのが確実です。
1:15書き方を確認します。
1:17対象の文字列に続けてリプレイスと書き、カッコの中に探したいパターンと、置き換え後の内容を渡します。
1:26第一引数は検索文字列か正規表現です。
1:29第二引数は置換文字列か、置換を行う関数です。
1:33戻り値は、置換後の新しい文字列で、元の文字列自体は変更されません。
1:39スライドの例では、エーが三つ並ぶ文字列の最初の一つだけがビーになること、
1:46ハローが二回出ても最初の一つだけがハイになることを、実機で確認しました。
1:52引数の順番は、探すもの、置き換え後、の順です。
1:56結果を受け取るには、戻り値を変数に入れるか、そのまま表示する形で使ってください。
2:04引数の順番を声に出して確認すると、逆に書くミスを防げます。
2:09記事の基本例を見ます。
2:11ハローの後にプレースホルダーの名前が入った定型文で、ネームという目印を実際の名前に置き換えるコードです。
2:19実行するとハロー葵と表示され、記事の期待出力と一致し、ノードの実機結果とも一致しました。
2:27記事が説明するように、これは定型文の一か所を差し替える使い方です。
2:32あいさつ文や通知文のように、決まった文面の一部だけを差し替える場面で、そのまま使える形です。
2:40置き換える対象が一文字でも、文章でも、考え方は同じです。
2:45まずはこの基本例を手で実行してみてください。
2:48差し替える目印は、本文に現れない独特な文字列にすると安全です。
2:54記事の境界条件の例を見ます。
2:56エーがハイフンを挟んで三つ並ぶ文字列に対して、エーをビーに置き換えるコードです。
3:02実行するとビーハイフンエーハイフンエーとなり、記事の期待出力と同じく、最初のエーだけが変わったことが分かります。
3:11実機の結果とも一致しました。
3:13これがリプレイスの一番大切な性質です。
3:16すべて変えたいのにリプレイスの文字列検索を使ってしまうと、置き換え漏れが起きます。
3:22成功例だけでなく、こうした境界条件を確かめると、実際のデータ処理へ組み込みやすくなります。
3:29置き換え漏れは画面では気づきにくいため、同じ語が複数回出るデータでは特に注意してください。
3:36第一引数に正規表現を使う例を見ます。
3:39同じ文字列でも、正規表現にジーフラグを付けて渡すと、一致するすべてが置換され、
3:44結果はすべてビーになります。
3:49一方、ジーフラグのない正規表現では、文字列検索と同じく最初の一個だけが変わります。
3:57どちらも実機の結果と一致しました。
4:00つまりリプレイスでも、正規表現のジーフラグを使えば全件置換ができます。
4:06正規表現を使うと、数字だけ、空白だけといった、種類で絞った置換もできます。
4:13パターンの意味とジーフラグの有無を、実行前に確認する習慣を付けてください。
4:20たとえば空白やカンマの種類をそろえる処理でも、正規表現ならまとめて表現できる場合があります。
4:29第二引数に置換関数を使う例を見ます。
4:31置換文字列の代わりに関数を渡すと、一致が見つかるたびにその関数が呼ばれ、
4:35戻り値が置き換え後の文字列になります。
4:40スライドの例では、ジーフラグ付きの正規表現で連続した数字を見つけて数値に直し、
4:44二倍にしてから文字列に戻しています。
4:48結果は百が二百、二百が四百となり、実機とも一致しました。
4:52ジーフラグがない場合は、最初の一致だけが関数の対象になります。
4:57決まった文字列への置き換えでは足りず、一致した内容に応じて結果を変えたい場合に便利です。
5:03計算が必要な置換や、一致ごとに違う値を作りたい場面で力を発揮します。
5:08置換文字列に含まれるドル記号の扱いを見ます。
5:12ドルとアンパサンドの組み合わせは、一致した部分そのものを表す特殊なパターンです。
5:17エービーシーのビーを角カッコ付きのこのパターンで置き換えると、一致したビーがはさまれてエー角カッコビーシーとなり、
5:23実機でも確認できました。
5:28記事も注意しているように、任意の文字列をそのまま返したい場合は、置換関数を使ってください。
5:34関数から同じ文字を返すと、特殊な解釈はされず、そのままの文字として置き換わります。
5:40利用者の入力を置換文字列に使う場合は、特に注意が必要です。
5:44ドル記号を文字として使いたい場合は、二つ重ねて書く表記も実機で確認できます。
5:50前回のリプレイスオールとの違いを、日付の区切りで確かめます。
5:54スラッシュ区切りの日付文字列に対して、リプレイスを使うと最初のスラッシュだけがハイフンになり、
5:59後ろはスラッシュのまま残ります。
6:04一方リプレイスオールでは、二か所ともハイフンに変わります。
6:08どちらも実機の結果と一致しました。
6:10一個だけ変えたい場合はリプレイス、すべて変えたい場合はリプレイスオールか、
6:15ジーフラグ付きの正規表現を使うリプレイスを選んでください。
6:20目的が一個か全部かで、方法を使い分けることが大切です。
6:24置き換え漏れは気づきにくいため、同じ語が複数回出るデータでは特に慎重に選んでください。
6:30注意点を三つ確認します。
6:32まず、大文字と小文字は区別されます。
6:35キャットと小文字のキャットが混ざる文字列では、小文字の方だけがドッグに変わり、
6:39実機でも確認できました。
6:43次に、検索文字列に空文字列を渡すと、置換文字列は先頭にだけ入ります。
6:49文字の間にも入るリプレイスオールとの違いに注意してください。
6:54最後に、該当する箇所がなければ、元の文字列がそのまま返ります。
6:59エラーにはなりません。
7:01あわせて、リプレイスを実行しても元の文字列は変わらないため、結果を使いたい場合は戻り値を受け取ってください。
7:09元の文字列が変わらない性質のおかげで、変換前と変換後を並べて比べることも簡単です。
7:16まとめです。
7:17リプレイスは、一致した部分を置き換えた、新しい文字列を返すメソッドです。
7:22判断のポイントは三つです。
7:24まず、検索が文字列なら置換は最初の一個だけであること。
7:28次に、全件変えたい場合はジーフラグ付き正規表現かリプレイスオールを使うこと。
7:34そして、置換文字列のドル記号には特殊な意味があり、そのまま返したい場合は置換関数を使うことです。
7:41まずは記事の基本例と境界例を実行し、検索文字列を一つ変えて、結果を予測してから確かめてみてください。
7:49前回のリプレイスオールと合わせると、文字列の置換の使い分けが完成します。
7:54お疲れさまでした。
7:55小さな置換を正しく使い分けることが、読みやすいデータ整形につながります。

日本語字幕をダウンロード（WebVTT）

この動画で学べること

String.prototype.replace()で文字列の一致部分を置換する方法を解説。引数と戻り値、実行結果付きのコード、間違えやすい点、ブラウザー・Node.js対応を確認できます。

解説記事・サンプルコードを読む：JavaScriptのString.prototype.replace()の使い方：引数・戻り値・実例と注意点 →