如何在JavaScript中插入字符串中的變量，而無需連接？

Question

我知道在PHP中，我們可以做這樣的事情：

$hello = "foo"; 
$my_string = "I pity the $hello"; 

輸出："I pity the foo"

我在想，如果同樣的事情在JavaScript中是可能的。在不使用連接的情況下在字符串中使用變量 - 它看起來更簡潔和優雅。

Answer 1

從Firefox 34 /鉻41/Safari瀏覽器啓動功能9 /微軟邊緣，你可以使用一個ES2015/ES6的功能，稱爲Template Literals，並使用此語法：

`String text ${expression}` 

模板文字由備註（``）（重音符號）代替雙引號或單引號。

例子：

var a = 5; 
var b = 10; 
console.log(`Fifteen is ${a + b}.`); 
// "Fifteen is 15. 

如何整潔是什麼？

獎勵：

它還支持多行字符串在JavaScript中沒有逃逸，這是偉大的模板：

return ` 
    <div class="${foo}"> 
     ... 
    </div> 
`; 

Browser support：

由於這個語法是不受舊版瀏覽器支持（Internet Explorer和Safari < = 8），您可能需要使用Babel將代碼轉換成ES5以確保它可以在任何地方運行。

---

旁註：

從IE8開始+，你可以使用基本的字符串內console.log格式：

console.log('%s is %d.', 'Fifteen', 15); 
// Fifteen is 15. 

Answer 2

Prior to Firefox 34/Chrome 41/Safari 9/Microsoft Edge，nope，這在JavaScript中是不可能的。您將不得不訴諸於：

var hello = "foo"; 
var my_string = "I pity the " + hello; 

Answer 3

Prior to Firefox 34/Chrome 41/Safari 9/Microsoft Edge，no。雖然你可以嘗試sprintf for JavaScript拿到一半了：

var hello = "foo"; 
var my_string = sprintf("I pity the %s", hello); 

Answer 4

如果你想爲microtemplating做插值，我喜歡Mustache.js用於這一目的。

Answer 5

以及你能做到這一點，但它不是ESP一般

'I pity the $fool'.replace('$fool', 'fool') 

你可以很容易地編寫智能做到這一點，如果你真的需要

Answer 6

如果你喜歡寫的CoffeeScript你可以這樣做：

hello = "foo" 
my_string = "I pity the #{hello}" 

CoffeeScript實際上是javasc ript，但語法更好。

有關CoffeeScript的概述，請檢查此beginner's guide。

Answer 7

你可以使用這個javascript函數來做這種模板。無需包含整個庫。

function createStringFromTemplate(template, variables) { 
    return template.replace(new RegExp("\{([^\{]+)\}", "g"), function(_unused, varName){ 
     return variables[varName]; 
    }); 
} 

createStringFromTemplate(
    "I would like to receive email updates from {list_name} {var1} {var2} {var3}.", 
    { 
     list_name : "this store", 
     var1  : "FOO", 
     var2  : "BAR", 
     var3  : "BAZ" 
    } 
); 

輸出："I would like to receive email updates from this store FOO BAR BAZ."

使用函數作爲參數的與string.replace（）函數是ECMAScript的v3的規範的一部分。有關更多詳細信息，請參閱this SO answer。

Answer 8

完整回答問題，隨時可以使用：

var Strings = { 
     create : (function() { 
       var regexp = /{([^{]+)}/g; 

       return function(str, o) { 
        return str.replace(regexp, function(ignore, key){ 
          return (key = o[key]) == null ? '' : key; 
        }); 
       } 
     })() 
}; 

呼叫作爲

Strings.create("My firstname is {first}, my last name is {last}", {first:'Neo', last:'Andersson'}); 

附加該String.prototype：

String.prototype.create = function(o) { 
      return Strings.create(this, o); 
} 

然後爲使用：

"My firstname is ${first}".create({first:'Neo'}); 

Answer 9

我寫這NPM包stringinject https://www.npmjs.com/package/stringinject它允許你做以下

var string = stringInject("this is a {0} string for {1}", ["test", "stringInject"]); 

將取代{0}和{1}與數組項，並返回下面的字符串

"this is a test string for stringInject" 

，或者你可以替換對象鍵佔位符和值，就像這樣：

var str = stringInject("My username is {username} on {platform}", { username: "tjcafferkey", platform: "GitHub" }); 

"My username is tjcafferkey on Github" 

Answer 10

那麼，你可以使用this is ${variable}或者你可以使用"this is "+variable 這兩個工作都很好。

還記得使用this is ${variable}，而不是「或」周圍的蒂爾達（``）鍵