Javascript文字列内の特定の場所に変数を挿入する

Question

'テンプレート'文字列を取得して情報を挿入する最も良い方法は何ですか？例えば

：

var templateString = "Hello {name1}, my name is {name2}"; 
var name1 = "Phil"; 
var name2 = "Amy"; 

は、中括弧で囲まれた変数名は値を挿入する簡単な名前はありますでしょうか？この例では固定インデックスで行うのではなく、指定されたテンプレート文字列と任意の数の変数に対して、これを実行する必要があります。

Answer 1

のようにそれを行うことができます。しかし、変数はそれらを使用する前に定義する必要があります。

var name1 = "Phil"; 
 
var name2 = "Amy"; 
 
var templateString = `Hello ${name1}, my name is ${name2}`; 
 

 
console.log(templateString); 
 
document.body.innerHTML = templateString;

前ES2015のために、あなたは、変数を置き換えるために正規表現を使用することができます。このために、検索置換値を持つオブジェクトを作成し、パラメータとして機能を持つString#replaceを使用することができます。

正規表現\{([^}]*)\}を使用して、中括弧で囲まれた文字列を一致させることができます。

// Create an object of the key-value of search-replace 
 
var obj = { 
 
    name1: "Phil", 
 
    name2: "Amy" 
 
}; 
 

 
var templateString = "Hello {name1}, my name is {name2}"; 
 

 
// Use replace with callback function 
 
var result = templateString.replace(/\{([^}]*)\}/g, function($0, $1) { 
 
    return obj[$1] || $0; // If replacement found in object use that, else keep the string as it is 
 
}); 
 

 
console.log(result); 
 
document.body.innerHTML = result;

正規表現説明：

1. \{：
2. ([^}]*)リテラル{ブラケットを一致：回の}ゼロまたはそれ以上の数以外のものと一致して、これを追加最初に捕捉されたグループ。
3. \}：一致}ブラケットリテラル
4. g：グローバルフラグ。このパターンに続くすべての可能な文字列にマッチします。

注：$0完全な文字列、すなわち{foo}と$1最初捕捉基fooです。

Answer 2

ES6は、文字列の補間を持って、あなたはあなたがES2015 template literalsを使用することができ、この

var name1 = "Phil"; 
 
var name2 = "Amy"; 
 
var templateString = `Hello ${name1}, my name is ${name2}`; 
 

 
document.write(templateString);

Answer 3

あなたは置き換えるJavaScript関数を使用することができます。http://www.w3schools.com/jsref/jsref_replace.asp

ので、あなたのコードは次のようになります。

var templateString = "Hello {name1}, my name is {name2}"; 
var name1 = "Phil"; 
var name2 = "Amy"; 

templateString = templateString.replace('{name1}', name1); 
templateString = templateString.replace('{name2}', name2); 

これが動作しない場合は私に知らせてください。

Answer 4

ES5では、Stringを使用できます。次のように置き換えます。

var templateString = "Hello {name1}, my name is {name2}"; 
var name1 = "Phil"; 
var name2 = "Amy"; 

templateString.replace(/\{([^}]*)\}/g, function (m, v) { return eval(v) || m; }) 

evalの使用は推奨されません。オブジェクト内の名前を設定する場合は、これを行うことができます：

var templateString = "Hello {name1}, my name is {name2}"; 
var names = {}; 
names.name1 = "Phil"; 
names.name2 = "Amy"; 

templateString.replace(/\{([^}]*)\}/g, function (m, v) { return names[v] || m; })