JavaScriptで文字列を置換える方法

Key Takeaways

1. JavaScriptで文字列の一部を変更するには、replace()を使用します。
2. 正規表現を使用すると、グローバルおよび大文字と小文字を区別しない置換が可能です。
3. 関数は、動的な値を生成するための置換として使用できます。

文字列操作はJavaScriptで一般的なタスクであり、最も頻繁に使用される操作の1つは文字列の一部の置換です。ユーザー入力を変更したり、データを処理したり、テキストをフォーマットしたりする場合でも、JavaScriptには文字列を効率的かつ柔軟に置換するためのいくつかのメソッドが用意されています。

String.prototype.replace()の使用

JavaScriptで文字列の一部を置換するための主要なメソッドは、replace()メソッドです。

構文

str.replace(searchValue, replaceValue);

• searchValueは、文字列または正規表現です。
• replaceValueは、文字列または置換を生成する関数です。

例1：単純な部分文字列の置換

const message = "Hello, world!";
const updated = message.replace("world", "JavaScript");
console.log(updated); // "Hello, JavaScript!"

これは、"world"の最初の出現箇所を"JavaScript"に置き換えます。

例2：正規表現を使用した置換

const sentence = "The rain in Spain stays mainly in the plain.";
const result = sentence.replace(/ain/g, "☀️");
console.log(result);
// "The r☀️ in Sp☀️ stays m☀️ly in the pl☀️."

g（グローバル）フラグを追加すると、最初の一致だけでなく、すべての一致が置換されるようになります。

大文字と小文字を区別しない置換

正規表現でiフラグを使用すると、大文字と小文字を区別しない一致にすることができます。

const text = "Hello HELLO hello";
const result = text.replace(/hello/gi, "hi");
console.log(result); // "hi hi hi"

置換関数の使用

置換を動的に計算する場合は、2番目の引数として関数を渡すことができます。

const prices = "Product A: $5, Product B: $10";
const updated = prices.replace(/\$(\d+)/g, (match, p1) => {
  const doubled = parseInt(p1) * 2;
  return `$${doubled}`;
});
console.log(updated); // "Product A: $10, Product B: $20"

よくある落とし穴：Replaceは最初の一致のみを置換する

デフォルトでは、replace()は、gフラグを持つ正規表現を使用しない限り、最初の出現箇所のみを置換します。

const str = "apple apple apple";
console.log(str.replace("apple", "orange")); // "orange apple apple"

すべてを置換するには、次のように使用します。

console.log(str.replace(/apple/g, "orange")); // "orange orange orange"

まとめ

• JavaScriptで文字列を変更するには、replace()を使用します。
• グローバルまたは複雑な置換には、正規表現を使用します。
• すべての出現箇所を置換するには、gフラグを使用します。
• 置換値を動的に計算するために、関数をreplace()に渡すことができます。

これらのテクニックを理解することで、JavaScriptアプリケーションで文字列を効果的に操作できるようになります。

FAQs

replace()が最初に出現した箇所のみを変更するのはなぜですか？

デフォルトでは、replace()は、gフラグを持つ正規表現が使用されない限り、最初の一致のみを対象とします。

大文字と小文字を区別しない方法でコンテンツを置換できますか？

はい、大文字と小文字を区別しない一致には、iフラグを持つ正規表現を使用します。

置換値を動的に計算するにはどうすればよいですか？

関数をreplace()の2番目の引数として渡します。これは一致ごとに呼び出されます。

Node.jsプロジェクトのホスティングに最適なLeapcellをご紹介します。

Leapcellは、Webホスティング、非同期タスク、Redis向けの次世代サーバーレスプラットフォームです。

多言語サポート

• Node.js、Python、Go、またはRustで開発します。

無料の無制限のプロジェクトをデプロイ

• 使用量に対してのみ支払い — リクエストなし、料金なし。

比類なきコスト効率

• アイドル料金なしの従量課金制。
• 例：25ドルで、平均応答時間60msで694万リクエストをサポートします。

合理化された開発者エクスペリエンス

• 簡単なセットアップのための直感的なUI。
• 完全に自動化されたCI/CDパイプラインとGitOps統合。
• 実用的な洞察のためのリアルタイムの指標とロギング。

簡単なスケーラビリティと高いパフォーマンス

• 簡単な高並行性を処理するための自動スケーリング。
• オペレーションのオーバーヘッドはゼロ — 構築に集中するだけです。

詳細については、ドキュメントをご覧ください。

Xでフォローしてください：@LeapcellHQ