本文实例讲述了ES6字符串模板,剩余参数,默认参数功能与用法。分享给大家供大家参考,具体如下:
这里介绍一下字符串模板以及剩余参数,默认参数的概念以及使用。
先来说说字符串模板。
字符串模板
ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}。如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生。
//产生一个随机数 var num=Math.random(); //将这个数字输出到console console.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程序设计有所帮助。
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
更新日志
- 群星2013-青春缤纷辑压箱宝大公开3CD2[新加坡限量版][WAV整轨]
- 林育群.2013-BalladShow(日本版)【环球】【WAV+CUE】
- 陈加洛.1992-痛到感觉不到【宝丽金】【WAV+CUE】
- 群星.2023-宿命之敌电视剧原声带【韶愔音乐】【FLAC分轨】
- 東京事変-大発見[FLAC+CUE]
- 椎名林檎-三文ゴシップ[FLAC+CUE]
- 2024年08月04日
- 裘德《裘德「最后的水族馆」演唱会LIVE》[320K/MP3][228.89MB]
- 裘德《裘德「最后的水族馆」演唱会LIVE》[24bit 48kHz][FLAC/分轨][2.08G]
- 基因三重奏《如果你什么都不说 音乐会现场录音》[320K/MP3][145.37MB]
- 孟庭苇.1996-月亮说话(2020环球24KGOLD限量版)【上华】【WAV+CUE】
- 群星.1997-新艺宝优质音响系列·国语精选监听版【新艺宝】【WAV+CUE】
- 阿桑.2005-寂寞在唱歌(星外星引进版)【华研国际】【WAV+CUE】
- 基因三重奏《如果你什么都不说 音乐会现场录音》[FLAC/分轨][287.43MB]
- 蔡题谦《我爱你,却依然要看你走》[320K/MP3][88.65MB]