2021年12月2日 JavaScript (JS Primer) 文字列の置換/削除
文字列の置き換えと削除
delete演算子は文字列に対して利用できません。文字列はプリミティブ型であるからです。
"use strict"; const str = "文字列"; // 文字列の0番目の削除を試みるがStrict modeでは例外が発生します。 delete str[0]; // => TypeError: property 0 is non-configurable and can't be deleted
String#replaceメソッド
文字列の場合は
String#replaceメソッドなどで削除したい文字を取り除いた"新しい文字列を返す"ことで削除を表現します。ちなみにこのメソッドは非破壊的メソッドです。
基本
文字列.replace("検索文字列", "置換文字列"); 文字列.replace(/パターン/, "置換文字列");
第一引数に検索文字列
第二引数に空文字列（" "）を指定して、置換することで、文字列を削除をしています。
const str = "やのYANOやの"; const newStr = str.replace("やの", ""); console.log(newStr); // => "YANOやの"
検索文字列は先頭でマッチしたもののみ置き換えが行われます。
（空文字と置き換えているため実質的には削除です）
正規表現で指定する例です。
const str = "やのYANOやの"; const newStr = str.replace(/やの/, ""); console.log(newStr); // => "YANOやの" console.log(str.replace(/やの/g, "")); // => "YANO"
String#replaceAll
replaceメソッドでもgフラグを指定するとマッチするパターン全て置き替えや削除を行うことができます。
すべて置き換えする場合は、String#replaceAllメソッドも利用出来ます。
両者の違いは、文字列を指定したときの挙動で、replaceAllならば、文字列でも全てを置き換えることができますが、replaceでは正規表現にgフラグを持たせないとできません。
const str = "やのYANOやの"; const newStr = str.replaceAll("やの", ""); console.log(newStr); // => "YANO"
正規表現の場合
const str = "???"; console.log(str.replace(/\?/g, "!")); // => "!!!" <200b> console.log(str.replaceAll(/\?/g, "!")); // => "!!!"
こちらは関数宣言と引数にアロー関数を使用した応用パターンです。
function toDateJa(dateString) { // パターンにマッチしたときのみ、コールバック関数で置換処理が行われます。 return dateString.replace(/(\d{4})-(\d{2})-(\d{2})/g, (all, year, month, day) => { // `all`には、マッチした文字列全体が入っているが今回は利用しません。 // `all`が次の返す値で置換されるイメージです。 return `${year}年${month}月${day}日`; }); } // マッチしない文字列の場合は、そのままの文字列が返ります。 console.log(toDateJa("本日ハ晴天ナリ")); // => "本日ハ晴天ナリ" // マッチした場合は置換した結果を返ります。 console.log(toDateJa("今日は2017-03-01です")); // => "今日は2017年03月01日です"
ポイント
- キャプチャリングが利用されています。
- gフラグがなくても動作します。
- replaceの引数に第一引数が正規表現パターン（検索値）、第二引数に匿名関数を指定しています。
- この場合4桁数値-2桁数値-2桁数値にマッチする正規表現パターンを検索しています。
- ブロック内の処理結果"2017年03月01日"が第二引数となり、文字列の置き換えが行われます。
復習
- 関数宣言はfunctionから始まります。
- function 関数名(仮引数1, 仮引数2)
- 関数名に()をつけることで、関数としてまとめた処理を呼び出します。
- 関数はオブジェクトのため、変数に代入できます。その場合も()を付けることで呼び出すことができます。
- 関数が値として扱える(変数に代入したりできる)ことをファーストクラス（ファンクション）と呼びます。
- 関数式はconst 変数名 = function()...の形で利用します。 右辺で関数名を省略することが出来ます。（匿名関数・無名関数） この場合にあえて関数名を定義する事で、この関数内でのみ再起的に呼び出すこともできます。
- ArrowFunctionは無名関数にのみ使用できます。
- コールバック関数とは関数やメソッドの引数に無名関数を定義する事です。
- コールバック関数を引数に持たせた関数を高階関数と呼びます。
以上の復習を踏まえた上で、今回のreplaceメソッドを使ったコードリーディングを行い理解を深めました。
