blocks|key|979912|text|Prior+to+Firefox34/Chrome41/Safari9/+Microsoft+Edge，不，这在javascript中是不可能的。您将不得不求助于：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|979913|var+hello+=+"foo";
var+my_string+=+"I+pity+the+"+%2B+hello;|code-block|syntax|javascript|979914|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/28088965/1772385^0|0|8|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<a href="https://stackoverflow.com/a/28088965/1772385">Prior to</a> Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, nope, that was not possible in javascript. You would have to resort to:

<pre><code>var hello = "foo";
var my_string = "I pity the " + hello;
</code></pre>

blocks|key|979984|text|微软Firefox34/Chrome41/Safari9/+Prior+to+Edge，第尽管您可以尝试使用sprintf+for+JavaScript来实现这一目标：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|979985|var+hello+=+"foo";
var+my_string+=+sprintf("I+pity+the+%25s",+hello);|code-block|syntax|javascript|979986|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/28088965/1772385|1|http://www.diveintojavascript.com/projects/sprintf-for-javascript^0|U|8|0|1I|M|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

<a href="https://stackoverflow.com/a/28088965/1772385">Prior to</a> Firefox 34 / Chrome 41 / Safari 9 / Microsoft Edge, no. Although you could try <a href="http://www.diveintojavascript.com/projects/sprintf-for-javascript" rel="noreferrer">sprintf for JavaScript</a> to get halfway there:

<pre><code>var hello = "foo";
var my_string = sprintf("I pity the %s", hello);
</code></pre>

blocks|key|980102|text|嗯，你可以这样做，但它不是一般的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|980103|'I+pity+the+$fool'.replace('$fool',+'fool')|code-block|syntax|javascript|980104|如果确实需要，您可以很容易地编写一个函数来智能地执行此操作|980105|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

well you could do this, but it's not esp general

<pre><code>'I pity the $fool'.replace('$fool', 'fool')
</code></pre>

You could easily write a function that does this intelligently if you really needed to

blocks|key|980122|text|如果你喜欢写CoffeeScript，你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|980123|hello+=+"foo"
my_string+=+"I+pity+the+#{hello}"|code-block|syntax|javascript|980124|CoffeeScript实际上是javascript，但具有更好的语法。|980125|有关CoffeeScript的概述，请查看此beginner's+guide。|offset|length|980126|entityMap|0|LINK|mutability|MUTABLE|url|http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-coffeescript^0|0|0|0|M|G|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

If you like to write CoffeeScript you could do:

<pre><code>hello = "foo"
my_string = "I pity the #{hello}"
</code></pre>

CoffeeScript actually IS javascript, but with a much better syntax.

For an overview of CoffeeScript check this <a href="http://blog.teamtreehouse.com/the-absolute-beginners-guide-to-coffeescript">beginner's guide</a>.

blocks|key|980294|text|我会使用反勾号。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|980295|let+name1+=+'Geoffrey';
let+msg1+=+`Hello+${name1}`;
console.log(msg1);+//+'Hello+Geoffrey'|code-block|syntax|javascript|980296|但是如果您在创建msg1时不知道name1。|offset|length|style|CODE|980297|例如，如果msg1来自一个应用程序接口。|980298|您可以使用：|980299|let+name2+=+'Geoffrey';
let+msg2+=+'Hello+${name2}';
console.log(msg2);+//+'Hello+${name2}'

const+regexp+=+/\${([%5E{]%2B)}/g;
let+result+=+msg2.replace(regexp,+function(ignore,+key){
++++return+eval(key);
});
console.log(result);+//+'Hello+Geoffrey'|980300|它将用他的价值取代${name2}。|980301|entityMap^0|0|0|8|4|G|5|0|5|4|0|0|0|9|8|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@$I|Z|J|10|K|L]|$I|11|J|12|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|13|8|@$I|14|J|15|K|L]]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|17|8|@]|9|@]|A|$E|F]]|$1|S|3|T|5|6|7|18|8|@$I|19|J|1A|K|L]]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|V|$]]

I would use the back-tick ``.

<pre class="lang-js prettyprint-override"><code>let name1 = 'Geoffrey';
let msg1 = `Hello ${name1}`;
console.log(msg1); // 'Hello Geoffrey'
</code></pre>

But if you don't know <code>name1</code> when you create <code>msg1</code>.

For exemple if <code>msg1</code> came from an API.

You can use :

<pre class="lang-js prettyprint-override"><code>let name2 = 'Geoffrey';
let msg2 = 'Hello ${name2}';
console.log(msg2); // 'Hello ${name2}'

const regexp = /\${([^{]+)}/g;
let result = msg2.replace(regexp, function(ignore, key){
 return eval(key);
});
console.log(result); // 'Hello Geoffrey'
</code></pre>

It will replace <code>${name2}</code> with his value.

blocks|key|980146|text|我编写了这个npm包stringinject+https://www.npmjs.com/package/stringinject，它允许您执行以下操作|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|980147|var+string+=+stringInject("this+is+a+{0}+string+for+{1}",+["test",+"stringInject"]);|code-block|syntax|javascript|980148|它将用数组项替换{0}和{1}，并返回以下字符串|980149|"this+is+a+test+string+for+stringInject"|980150|或者您可以将占位符替换为对象键和值，如下所示：|980151|var+str+=+stringInject("My+username+is+{username}+on+{platform}",+{+username:+"tjcafferkey",+platform:+"GitHub"+});

"My+username+is+tjcafferkey+on+Github"+|980152|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/stringinject^0|N|16|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|C|$]]|$1|O|3|P|5|F|7|16|8|@]|9|@]|C|$G|H]]|$1|Q|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]]]

I wrote this npm package stringinject <a href="https://www.npmjs.com/package/stringinject" rel="noreferrer">https://www.npmjs.com/package/stringinject</a> which allows you to do the following

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

which will replace the {0} and {1} with the array items and return the following string

<pre><code>"this is a test string for stringInject"
</code></pre>

or you could replace placeholders with object keys and values like so:

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

"My username is tjcafferkey on Github" 
</code></pre>

blocks|key|1194393|text|如果您正在尝试对微模板进行插值，我喜欢使用Mustache.js。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1194394|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/janl/mustache.js/^0|L|B|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

If you're trying to do interpolation for microtemplating, I like <a href="http://github.com/janl/mustache.js/" rel="nofollow noreferrer">Mustache.js</a> for that purpose.

blocks|key|980177|text|我没有看到这里提到的任何外部库，但是Lodash有_.template()，|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|980178|https://lodash.com/docs/4.17.10#template|980179|如果你已经在使用这个库，那么它是值得一试的，如果你没有使用Lodash，你可以随时从npm+npm+install+lodash.template中挑选方法，这样你就可以减少开销。|980180|最简单的形式-|980181|var+compiled+=+_.template('hello+<%25=+user+%25>!');
compiled({+'user':+'fred'+});
//+=>+'hello+fred!'|code-block|syntax|javascript|980182|还有一堆配置选项-|980183|_.templateSettings.interpolate+=+/{{([\s\S]%2B?)}}/g;
var+compiled+=+_.template('hello+{{+user+}}!');
compiled({+'user':+'mustache'+});
//+=>+'hello+mustache!'|980184|我发现自定义分隔符最有趣。|980185|entityMap|0|LINK|mutability|MUTABLE|url^0|P|C|0|0|14|0|0|1A|R|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|16|8|@]|D|@$9|17|A|18|1|19]]|E|$]]|$1|H|3|I|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1D|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1E|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1F|8|@]|D|@]|E|$]]|$1|S|3|T|5|N|7|1G|8|@]|D|@]|E|$O|P]]|$1|U|3|V|5|6|7|1H|8|@]|D|@]|E|$]]|$1|W|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|X|$Y|$5|Z|10|11|E|$12|G]]]]

Don't see any external libraries mentioned here, but Lodash has <code>_.template()</code>,

<a href="https://lodash.com/docs/4.17.10#template" rel="nofollow noreferrer">https://lodash.com/docs/4.17.10#template</a>

If you're already making use of the library it's worth checking out, and if you're not making use of Lodash you can always cherry pick methods from npm <code>npm install lodash.template</code> so you can cut down overhead.

Simplest form -

<pre><code>var compiled = _.template('hello &lt;%= user %&gt;!');
compiled({ 'user': 'fred' });
// =&gt; 'hello fred!'
</code></pre>

There are a bunch of configuration options also -

<pre><code>_.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
var compiled = _.template('hello {{ user }}!');
compiled({ 'user': 'mustache' });
// =&gt; 'hello mustache!'
</code></pre>

I found custom delimiters most interesting.

blocks|key|1194732|text|只需使用：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1194733|var+util+=+require('util');

var+value+=+15;
var+s+=+util.format("The+variable+value+is:+%25s",+value)|code-block|syntax|javascript|1194734|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Simply use:

<pre><code>var util = require('util');

var value = 15;
var s = util.format("The variable value is: %s", value)
</code></pre>

blocks|key|1194537|text|String.prototype.interpole+=+function+()+{
++++var+c=0,+txt=this;
++++while+(txt.search(/{var}/g)+>+0){
++++++++txt+=+txt.replace(/{var}/,+arguments[c]);
++++++++c%2B%2B;
++++}
++++return+txt;
}|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1194538|Uso：|unstyled|1194539|var+hello+=+"foo";
var+my_string+=+"I+pity+the+{var}".interpole(hello);
//resultado+"I+pity+the+foo"|1194540|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>String.prototype.interpole = function () {
 var c=0, txt=this;
 while (txt.search(/{var}/g) &gt; 0){
 txt = txt.replace(/{var}/, arguments[c]);
 c++;
 }
 return txt;
}
</code></pre>

Uso:

<pre><code>var hello = "foo";
var my_string = "I pity the {var}".interpole(hello);
//resultado "I pity the foo"
</code></pre>

blocks|key|980361|text|创建一个类似于Java的String.format()的方法|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|980362|StringJoin=(s,+r=[])=>{
++r.map((v,i)=>{
++++s+=+s.replace('%25'%2B(i%2B1),v)
++})
return+s
}|code-block|syntax|javascript|980363|使用|980364|console.log(StringJoin('I+can+%251+a+%252',['create','method']))+//output:+'I+can+create+a+method'|980365|entityMap^0|C|F|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

Create a method similar to <code>String.format()</code> of Java

<pre><code>StringJoin=(s, r=[])=&gt;{
 r.map((v,i)=&gt;{
 s = s.replace('%'+(i+1),v)
 })
return s
}
</code></pre>

use 

<pre><code>console.log(StringJoin('I can %1 a %2',['create','method'])) //output: 'I can create a method'
</code></pre>

blocks|key|1194706|text|2020年和平语录：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1194707|Console.WriteLine("I+{0}+JavaScript!",+">:D<");

console.log(`I+${'>:D<'}+C#`)|code-block|syntax|javascript|1194708|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Peace quote of 2020:

<pre><code>Console.WriteLine("I {0} JavaScript!", "&gt;:D&lt;");

console.log(`I ${'&gt;:D&lt;'} C#`)
</code></pre>

blocks|key|980328|text|var+hello+=+"foo";|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|980329|var+my_string+="I+pity+the";|code-block|syntax|javascript|980330|console.log(my_string，你好)|980331|entityMap^0|0|I|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<code>var hello = "foo";</code>

<pre><code>var my_string ="I pity the";
</code></pre>

console.log(my_string, hello)

I know in PHP we can do something like this:

<pre><code>$hello = "foo";
$my_string = "I pity the $hello";
</code></pre>

Output: <code>"I pity the foo"</code>

I was wondering if this same thing is possible in JavaScript as well. Using variables inside strings without using concatenation — it looks more concise and elegant to write.

How to interpolate variables in strings in JavaScript, without concatenation?

我知道在PHP中我们可以这样做：$hello = "foo";$my_string = "I pity the $hello";输出："I pity the foo"我想知道同样的事情在JavaScript中是否也是可能的。在字符串中使用变量而不使用连接 - ，这样写起来更简洁、更优雅。

问如何在JavaScript中插入字符串中的变量，而不是连接？
EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JavaScript中插入字符串中的变量，而不是连接？EN

回答 13

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JavaScript中插入字符串中的变量，而不是连接？
EN