时间:2021-05-28
本文实例讲述了ES6字符串模板,剩余参数,默认参数功能与用法。分享给大家供大家参考,具体如下:
这里介绍一下字符串模板以及剩余参数,默认参数的概念以及使用。
先来说说字符串模板。
字符串模板
ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}。如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生。
//产生一个随机数var num=Math.random();//将这个数字输出到consoleconsole.log(`your num is ${num}`);可以看出来,字符串模板其实就是将JavaScript中常用的字符串拼接变得更加简单了一些。但是其实它还有一些不易让人察觉的作用:
1. 模板中可以继续套入一个模板;
2. 如果一个变量不是字符串,通过字符串模板它会变成字符串,就好像调用了.toString()方法一样;
但是同样的,有一些事情它也做不了:
1. 它不能自动转义,所以为了防止CORS攻击,我们还是要小心处理一些敏感数据;
2. 它不是用来取代其他js模板的,因为它没有关于循环的相关语法,而这些是其他js模板擅长的。
下图是字符串模板的使用示例:
可以看到字符串模板中还可以解析函数,并且可以带参数。
剩余参数
接下来说说剩余参数,很多语言早就实现了剩余参数了。剩余参数说来了就是用来取代arguments的。
大家应该知道arguments吧,作为javascript函数中的默认属性,arguments代表了所有的参数。
arguments功能虽然强大,但是容易让人疏忽从而造成不必要的错误。我们举一个例子,我们先一个简单的验证函数containsAll ,其作用是检测第一个参数中是否包含后面几个参数。
比如:
containsAll("banana", "b", "nan") //会返回 true,containsAll("banana", "c", "nan") //会返回 false。实现代码如下:
function containsAll(haystack) { for (var i = 1; i < arguments.length; i++) { var needle = arguments[i]; if (haystack.indexOf(needle) === -1) { return false; } } return true;}可以看到我们用到了arguments对象,但是它的下标我们是从1开始的,如果从0开始就会选中haystack了,所以不能选择0,而这里就最容易出错。
那么我们看看用ES6的剩余参数如何来实现这个方法:
function containsAll(haystack, ...needles) { for (var needle of needles) { if (haystack.indexOf(needle) === -1) { return false; } } return true;}可以看到剩余参数…的特定语法。也就是说,所有第2到第n个参数现在可以直接放到…后面的数组中去了。
…的用法可不仅仅局限于函数的参数噢,还可以用来简化:
var a = [2,3,4];var b = [ 1, ...a, 5 ];console.log( b );// [1,2,3,4,5]默认参数
再来谈谈默认参数,默认参数也早就被很多语言所实现,其实是一个很基本的功能:
function animalSentence(animals2="tigers", animals3="bears") { return `Lions and ${animals2} and ${animals3}! Oh my!`;}不同的参数会返回不同的结果:
animalSentence()//"Lions and tigers and bears! Oh my!";animalSentence("elephants") //"Lions and elephants and bears! Oh my!"animalSentence("elephants", "whales")//"Lions and elephants and whales! Oh my!".但是javascript的默认参数功能可不只这么简单,它还可以进行简短的表达式:
function animalSentenceFancy(animals2="tigers",animals3=(animals2 == "bears") ? "sealions" : "bears"){ return `Lions and ${animals2} and ${animals3}! Oh my!`;}希望本文所述对大家ECMAScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了ES6(ECMAScript6)新特性之模板字符串用法。分享给大家供大家参考,具体如下:ES6引入了一种新型的字符串字面量语法,我们称之为模板字符
拓展的方法子串的识别ES6之前判断字符串是否包含子串,用indexOf方法,ES6新增了子串的识别方法。includes():返回布尔值,判断是否找到参数字符串
本文实例讲述了ES6模板字符串和标签模板的应用。分享给大家供大家参考,具体如下:ES6中对字符串进行了扩展,而模板字符串就是一个非常实用的方式,可以在html中
本文实例讲述了ES6新特性之字符串的扩展。分享给大家供大家参考,具体如下:一、ES5字符串函数concat:将两个或多个字符的文本组合起来,返回一个新的字符串。
模板字符串(templatestrings)ES6中引进的一种新型的字符串字面量语法-模板字符串。书面上来解释,模板字符串是一种能在字符串文本中内嵌表示式的字符