华山资源网

ES6字符串模板，剩余参数，默认参数功能与用法示例
网络编程 2024/11/15 佚名
3 1

本文实例讲述了ES6字符串模板，剩余参数，默认参数功能与用法。分享给大家供大家参考，具体如下：

这里介绍一下字符串模板以及剩余参数，默认参数的概念以及使用。
先来说说字符串模板。

字符串模板

ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${varible}。如果你使用过像C#等后端强类型语言的话，对此功能应该不会陌生。

//产生一个随机数
var num=Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

可以看出来，字符串模板其实就是将JavaScript中常用的字符串拼接变得更加简单了一些。但是其实它还有一些不易让人察觉的作用：

1. 模板中可以继续套入一个模板；

2. 如果一个变量不是字符串，通过字符串模板它会变成字符串，就好像调用了.toString()方法一样；

但是同样的，有一些事情它也做不了：

1. 它不能自动转义，所以为了防止CORS攻击，我们还是要小心处理一些敏感数据；

2. 它不是用来取代其他js模板的，因为它没有关于循环的相关语法，而这些是其他js模板擅长的。

下图是字符串模板的使用示例：

ES6字符串模板，剩余参数，默认参数功能与用法示例

可以看到字符串模板中还可以解析函数，并且可以带参数。

剩余参数

接下来说说剩余参数，很多语言早就实现了剩余参数了。剩余参数说来了就是用来取代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程序设计有所帮助。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com