当前位置：首页 > news >正文

网站建设交互效果/it培训机构推荐

news 2025/7/27 22:03:28

网站建设交互效果,it培训机构推荐,网站建设发展前景,商丘手机网站建设es6字符串转模板字符串本文是Microsoft的Web开发系列的一部分。感谢您支持使SitePoint成为可能的合作伙伴。 ES6是JavaScript的未来，而且已经存在。它是一个最终的规范，它带来了语言必须具备的许多功能，以与当今的网络需求保持竞争力。 ES…

es6字符串转模板字符串

本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

ES6是JavaScript的未来，而且已经存在。 它是一个最终的规范，它带来了语言必须具备的许多功能，以与当今的网络需求保持竞争力。 ES6中并非所有内容都适合您，在本系列文章中，我将展示非常方便且已经可用的功能。

如果看一下我编写JavaScript代码，您会发现我总是使用单引号而不是双引号来定义字符串。使用JavaScript都可以，以下两个示例完全相同：

var animal = "cow";
var animal = 'cow';

我之所以喜欢单引号，是因为，首先，它使以适当的引号属性组合HTML字符串变得更容易：

// with single quotes, there's no need to
// escape the quotes around the class value
var but = '<button class="big">Save</button>';
// this is a syntax error:
var but = "<button class="big">Save</button>";
// this works:
var but = "<button class=\"big\">Save</button>";

现在唯一需要转义的时间是在HTML中使用单引号时，这种情况很少见。我唯一能想到的就是内联JavaScript或CSS，这意味着您很可能会对标记做一些可疑或绝望的事情。即使在您的文本中，最好不要使用单引号，但在印刷上更令人愉悦。

旁白：当然，HTML足够宽容，可以省略引号或在属性周围使用单引号，但是我更喜欢为人类创建可读的标记，而不是依靠解析器的原谅。 我们之所以宽容HTML5解析器，是因为人们过去曾写过糟糕的标记，而不是以此作为借口。

在document.write的DHTML日子里，我已经受够了在新的弹出窗口中的框架集中创建文档以及其他可憎的事情，不想再使用转义字符了。有时，我们需要三元组，这甚至在我们的编辑器中进行颜色编码之前。一团糟。

用字符串替换表达式？

我更喜欢单引号的另一个原因是，我花了很多时间在非常重要的大型网站上写了很多PHP。在PHP中，单引号和双引号之间是有区别的。单引号的字符串中没有任何替代，双引号的字符串中没有任何替代。这意味着在PHP 3和4的年代，使用单引号的速度要快得多，因为解析器不必遍历字符串来替换值。这是一个示例，意味着：

<?php
$animal = 'cow';
$sound = 'moo';
echo 'The animal is $animal and its sound is $sound';
// => The animal is $animal and its sound is $sound
echo "The animal is $animal and its sound is $sound";
// => The animal is cow and its sound is moo
?>

JavaScript没有这种替代，这就是为什么我们必须串联字符串才能获得相同的结果。这非常麻烦，因为您需要始终跳入或跳出引号。

var animal = 'cow';
var sound = 'moo';
alert('The animal is ' + animal + ' and its sound is ' + sound);
// => "The animal is cow and its sound is moo"

多行混乱

更长，更复杂的字符串会变得非常混乱，尤其是在我们组装大量HTML时。而且，很可能您迟早会导致整理工具抱怨在行尾加+后尾随空格。这基于JavaScript没有多行字符串的问题：

// this doesn't work
var list = '<ul> 
<li>Buy Milk</li> 
<li>Be kind to Pandas</li> 
<li>Forget about Dre</li> 
</ul>'; 
// This does, but urgh… 
var list = '<ul>\
<li>Buy Milk</li>\ 
<li>Be kind to Pandas</li>\ 
<li>Forget about Dre</li>\ 
</ul>';
// This is the most common way, and urgh, too… 
var list = '<ul>' +
' <li>Buy Milk</li>' +
' <li>Be kind to Pandas</li>' +
' <li>Forget about Dre</li>' + 
'</ul>';

客户端模板解决方案

为了解决JavaScript中字符串处理和连接混乱的问题，我们做了我们经常做的事情–我们编写了一个库。有许多HTML模板库，其中Mustache.js可能是开创性的。所有这些都遵循自己的（非标准化的）语法，并在这种思路下发挥作用。这有点像说您用markdown编写内容，然后意识到“ markdown”的含义有很多不同的想法。

输入模板字符串

随着ES6的出现及其标准化，我们现在可以欢欣鼓舞，因为JavaScript现在在处理字符串方面遇到了新的麻烦： Template Strings 。当前浏览器对模板字符串的支持令人鼓舞：Chrome 44 +，Firefox 38 +， Microsoft Edge和Webkit都已上线。令人遗憾的是，Safari浏览器还没有，但它将到达那里。

模板字符串的天才之处在于它使用了一个新的字符串定界符，既不在HTML中也不在普通文本中使用：反引号（`）。

现在，使用此代码，我们可以在JavaScript中替换字符串表达式：

var animal = 'cow';
var sound = 'moo';
alert(`The animal is ${animal} and its sound is ${sound}`);
// => "The animal is cow and its sound is moo"

${}构造可以采用任何返回值JavaScript表达式，例如可以进行计算或访问对象的属性：

var out = `ten times two totally is ${ 10 * 2 }`;
// => "ten times two totally is 20"
var animal = {
name: 'cow',
ilk: 'bovine',
front: 'moo',
back: 'milk',
}
alert(`
The ${animal.name} is of the 
${animal.ilk} ilk, 
one end is for the ${animal.front}, 
the other for the ${animal.back}
`);
// => 
/*
The cow is of the 
bovine ilk, 
one end is for the moo, 
the other for the milk
*/

最后一个示例还向您显示多行字符串不再是问题。

标记模板

使用模板字符串可以做的另一件事是在它们之前添加一个标签，该标签是被调用并将字符串作为参数获取的函数的名称。例如，您可以对生成的URL字符串进行编码，而不必一直求助于名称可怕的encodeURIComponent 。

function urlify (str) {
return encodeURIComponent(str);
}
urlify `http://beedogs.com`;
// => "http%3A%2F%2Fbeedogs.com"
urlify `woah$£$%£^$"`;
// => "woah%24%C2%A3%24%25%C2%A3%5E%24%22"
// nesting also works:
var str = `foo ${urlify `&&`} bar`;
// => "foo %26%26 bar"

这可行，但依赖于隐式数组到字符串强制。发送给函数的参数不是字符串，而是字符串和值的数组。如果使用我在此显示的方式，为了方便起见，它将转换为字符串，但是正确的方法是直接访问数组成员。

从模板字符串中检索字符串和值

在标记函数中，您不仅可以获取完整的字符串，还可以获取其部分。

function tag (strings, values) {
console.log(strings);
console.log(values);
console.log(strings[1]);
}
tag `you ${3+4} it`;
/* =>
Array [ "you ", " it" ]
7
it
*/

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

还提供了一组原始字符串，这意味着您将获得字符串中的所有字符，包括控制字符。例如，假设您使用\ n添加换行符。您将在字符串中获得双精度空格，但在原始字符串中获得\ n字符：

function tag (strings, values) {
console.log(strings);
console.log(values);
console.log(strings[1]);
console.log(strings.raw[1]);
}
tag `you ${3+4} \nit`;
/* =>
Array [ "you ", "  it" ]
7
it
\nit
*/

结论

模板字符串是ES6中可以立即使用的一些小优点之一。如果必须支持较旧的浏览器，则当然可以将ES6转换为ES5。您可以使用诸如featuretests.io之类的库或以下代码对模板字符串支持进行功能测试：

var templatestrings = false;
try {
new Function( "`{2+2}`" );
templatestrings = true;
} catch (err) {
templatestrings = false;
} 
if (templatestrings) {
// …
}

有关模板字符串的更多文章：