JavaScript中反向符号(`)的用法是什么?
反引号似乎与单引号符号一样工作,所以我可以用它来定义一个像这样的string:
var s = `abc`;
有没有什么方法可以反引起实际的不同?
这是一个名为模板string文字的ECMAScript 6function。
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
- 示例: http : //tc39wiki.calculist.org/es6/template-strings/
- 官方规范: ES 2015语言规范,12.2.9模板文字词汇组件 (有点干)
模板文字可以多行使用,可以使用“插值”插入variables的内容:
var a = 123, str = `--- a is: ${a} ----`; console.log(str);
会输出:
--- a is: 123 ---
支持Firefox 34和Chrome 41
ES6提出了一种新的string文字,使用back-tick作为分隔符。 这些文字允许embedded基本的string插值expression式,然后自动分析和评估。
let person = {name: 'RajiniKanth', age: 68, greeting: 'Thalaivaaaa!' }; let usualHtmlStr = "<p>My name is " + person.name + ",</p>\n" + "<p>I am " + person.age + " old</p>\n" + "<strong>\"" + person.greeting +"\" is what I usually say</strong>"; let newHtmlStr = `<p>My name is ${person.name},</p> <p>I am ${person.age} old</p> <p>"${person.greeting}" is what I usually say</strong>`; console.log(usualHtmlStr); console.log(newHtmlStr);
正如您所看到的,我们使用了`
围绕一系列字符,这些字符被解释为一个string字面值,但是任何forms的${..}
expression式都将立即被内联parsing和计算。
内插string文字的一个很好的好处是它们可以分割成多行:
var Actor = {"name" : "RajiniKanth"}; var text = `Now is the time for all good men like ${Actor.name} to come to the aid of their country!`; console.log( text ); // Now is the time for all good men // to come to the aid of their // country!
插值expression式
任何有效的expression式都允许出现在内插string文字${..}
中,包括函数调用,内联函数expression式调用,甚至是其他内插的string文字!
function upper(s) { return s.toUpperCase(); } var who = "reader" var text = `A very ${upper( "warm" )} welcome to all of you ${upper( `${who}s` )}!`; console.log( text ); // A very WARM welcome // to all of you READERS!
在这里,当把whovariables与"s"
string相结合,而不是who + "s"
时,内部的`${who}s`
插入的string文字对我们来说有点更方便。 另外要注意的是插入的string文字只是在词汇的范围内出现,不以任何方式dynamic范围
function foo(str) { var name = "foo"; console.log( str ); } function bar() { var name = "bar"; foo( `Hello from ${name}!` ); } var name = "global"; bar(); // "Hello from bar!"
通过减less烦恼,使用HTML的模板文字显然更具可读性。
古老的方式:
'<div class="' + className + '">' + '<p>' + content + '</p>' + '<a href="' + link + '">Let\'s go</a>' '</div>';
使用ES6:
`<div class="${className}"> <p>${content}</p> <a href="${link}">Let's go</a> </div>`
- 你的string可以跨越多行。
- 你不必逃避引号字符。
- 你可以避免这样的分组:'>''
- 您不必使用加号运算符。
标记模板文字
我们也可以标记一个模板string,当模板string被标记时,文字和replace被传递给返回结果值的函数。
function myTaggedLiteral(strings) { console.log(strings); } myTaggedLiteral`test`; //["test"] function myTaggedLiteral(strings,value,value2) { console.log(strings,value, value2); } let someText = 'Neat'; myTaggedLiteral`test ${someText} ${2 + 3}`; //["test", ""] // "Neat" // 5
我们可以在这里使用spread运算符来传递多个值。 第一个参数 – 我们称之为string – 是所有普通string(任何插值expression式之间的东西)的一个数组。
然后我们把所有后续的参数收集到一个名为values的数组中,使用... gather/rest operator
,虽然你当然可以把它们作为string参数后面的单独的命名参数,就像我们上面所做的那样(value1, value2 etc)
。
function myTaggedLiteral(strings,...values) { console.log(strings); console.log(values); } let someText = 'Neat'; myTaggedLiteral`test ${someText} ${2 + 3}`; //["test", ""] // "Neat" // 5
收集到我们的值数组中的参数是在string文字中find的已经评估的插值expression式的结果。 带标签的string文字就像在插值计算之后,但在最终的string值被编译之前的一个处理步骤,允许您更多地控制从文字中生成string。 我们来看一个创build可重用模板的例子。
const Actor = { name: "RajiniKanth", store: "Landmark" } const ActorTemplate = templater`<article> <h3>${'name'} is a Actor</h3> <p>You can find his movies at ${'store'}.</p> </article>`; function templater(strings, ...keys) { return function(data) { let temp = strings.slice(); keys.forEach((key, i) => { temp[i] = temp[i] + data[key]; }); return temp.join(''); } }; const myTemplate = ActorTemplate(Actor); console.log(myTemplate);
原始的string
我们的标签函数接收我们称为string的第一个参数,这是一个数组。 但是还有一些额外的数据:所有string的原始未处理版本。 您可以使用.raw
属性访问这些原始string值,如下所示:
function showraw(strings, ...values) { console.log( strings ); console.log( strings.raw ); } showraw`Hello\nWorld`;
正如你所看到的,string的原始版本保留转义的\n
序列,而string的处理版本把它当作一个非转义的真正的新行。 ES6带有一个内置函数,可以用作string文字标签: String.raw(..)
。 它只是传递string的原始版本:
console.log( `Hello\nWorld` ); /* "Hello World" */ console.log( String.raw`Hello\nWorld` ); // "Hello\nWorld"
反引号( `
)用于定义模板文字。 模板文字是ES6中的一个新function,可以更轻松地处理string。
特征:
- 我们可以在模板文字中插入任何types的expression式。
- 他们可以是多线的。
注意:我们可以在反引号( `
)内轻松使用单引号( '
)和双引号( "
)。
例:
var nameStr = `I'm "Rohit" Jindal`;
为了插入variables或expression式,我们可以使用${expression}
表示法。
var name = 'Rohit Jindal'; var text = `My name is ${name}`; console.log(text); // My name is Rohit Jindal
多行string意味着您不再需要使用\n
换行了。
例:
const name = 'Rohit'; console.log(`Hello ${name}! How are you?`);
输出:
Hello Rohit! How are you?
反引号包含模板字面值,即模板string。 模板文字是允许embeddedexpression式和string插值function的string文字。
模板文字在expression式中embedded了expression式,由美元符号和expression式(即$ {expression})周围的大括号表示。 占位符/expression式被传递给一个函数。 默认函数只是连接string。
为了避免反斜杠,在它之前加一个反斜杠: \`` === '
'; => true
使用反引号可以更轻松地编写多行string:
console.log( string text line 1 string text line 2
); 或console.log( Fifteen is ${a + b} and not ${2 * a + b}.
对比香草JS:
console.log('string text line 1 \ n'+'string text line 2'); 或console.log('15是'+(a + b)+'和\ nnot'+(2 * a + b)+'。');
转义序列:以“\ u”开头的Unicode转义,例如\ u00A9 \ u00A9 \ u \ u4表示的Unicode码转义,例如\ u {2F804}例如\ xA9开始的hex转义\ xA9 Octal字符转义由“\”和(a)数字开始,例如\ 251