Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/390.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript ES6特性:模板字符串如何有用?_Javascript_Ecmascript 6_String Interpolation - Fatal编程技术网

Javascript ES6特性:模板字符串如何有用?

Javascript ES6特性:模板字符串如何有用?,javascript,ecmascript-6,string-interpolation,Javascript,Ecmascript 6,String Interpolation,又名模板文字,字符串插值。() 为什么它们有用 我什么时候不用它们 这些特性与将JSX与React一起使用有什么相似之处和不同之处 如何有效地使用wiki底部提到的内容?该代码在不终止字符串和附加变量的情况下更具可读性 var链接=[{ url:“http://www.google.com", 名称:“谷歌” }, { url:“http://www.yahoo.com", 名称:“雅虎” }, { url:“http://www.bing.com", 姓名:“冰” }]; var输出=“”;

又名模板文字,字符串插值。()

为什么它们有用

我什么时候不用它们

这些特性与将JSX与React一起使用有什么相似之处和不同之处


如何有效地使用wiki底部提到的内容?

该代码在不终止字符串和附加变量的情况下更具可读性

var链接=[{
url:“http://www.google.com",
名称:“谷歌”
}, {
url:“http://www.yahoo.com",
名称:“雅虎”
}, {
url:“http://www.bing.com",
姓名:“冰”
}];
var输出=“
    ”; 对于(变量i=0,len=links.length;i `; } 输出+=“
”; document.getElementById('output')。innerHTML=output
它们使代码更具可读性。例如:

// ES6
let fruit = 'apples'
console.log(`I like ${fruit}.`)
ES5等效标准:

// ES5
var fruit = 'apples'
console.log('I like ' + fruit + '.')
// ES5
console.log("string text line 1\nstring text line 2")
多行功能还便于书写大块单词:

// ES6
console.log(`string text line 1
string text line 2`)
ES5等效标准:

// ES5
var fruit = 'apples'
console.log('I like ' + fruit + '.')
// ES5
console.log("string text line 1\nstring text line 2")
如果存在变量,则应始终使用模板字符串。

字符串模板(或字符串插值)功能在许多编程语言中无处不在。当您希望用当前范围中的变量填充一个不同的或重复出现的模板时,应该使用它。它使模板比串接或
printf
样式的格式更具可读性

与JSX的区别在于,JSX用于模板化HTML,而字符串模板用于模板化任何类型的文本,例如日志消息或用户输出

当您希望对具有大量实际反斜杠而不是转义反斜杠的字符串进行操作时,原始字符串可能非常有用。例如,如果要描述字符串
\n\r\u0000
,则将其写为
\\n\\r\\u0000
,可读性不强。对于原始字符串,您可以将其写入
String.raw('\n\r\u0000')

使用1 它是多行的。(在JS中,norm字符串在换行符之前需要反斜杠。)
使用2

另一种风格。比较:

a: ${a}, b: ${b}, c: ${c}, d: ${d}, e: ${e}
.与:

a: '+a+', b: '+b+', c: '+c+', d: '+d+', e: '+e
function generated_function(){
    ${statement1}
    ${function2_name}();
    f3();
    f${ 5*5 }();
}
.并比较:

函数生成\u函数(){
“+语句1+”
“+function2_name+”();
f3();
f'+5*5+'();
}
.与:

a: '+a+', b: '+b+', c: '+c+', d: '+d+', e: '+e
function generated_function(){
    ${statement1}
    ${function2_name}();
    f3();
    f${ 5*5 }();
}

很好,它的反斜杠也漏掉了-被或漏掉了



这和我不一样。Cf.

最好记住,在ES6中可以做的一切,都可以在ES5中做,只是用一种更难看的方式。在ES5中用HTML构建是一件痛苦的事情,在模板构建中使用+=并嵌套在变量连接中。JSX与字符串无关。苹果和桔子。如果使用ES2015字符串插值,则没有理由不使用
进行of
<代码>用于(让链接链接起来)….