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

 更新时间:2017年04月06日 10:57:19   作者:布瑞泽的童话  
这篇文章主要介绍了ES6字符串模板,剩余参数,默认参数功能与用法,结合具体实例形式分析了ECMAScript6中的6字符串模板,剩余参数,默认参数的概念、作用、使用方法与相关注意事项,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • javascript+Canvas实现画板功能

    javascript+Canvas实现画板功能

    这篇文章主要为大家详细介绍了javascript+Canvas实现画板功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • 小程序自定义tabBar组件封装

    小程序自定义tabBar组件封装

    这篇文章主要为大家详细介绍了小程序自定义tabBar组件封装,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 基于Css3和JQuery实现打字机效果

    基于Css3和JQuery实现打字机效果

    最近做项目,有需求实现一个字符逐个出现,类似于打字机效果,于是上网搜了相关资料,接下来,小编就给大家详细介绍基于Css3和JQuery实现打字机效果,需要的朋友可以参考下
    2015-08-08
  • 15个顶级开源JavaScript框架和库

    15个顶级开源JavaScript框架和库

    今天小编就为大家分享一篇关于15个顶级开源JavaScript框架和库的文章,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • javascript中的toFixed固定小数位数 简单实例分享

    javascript中的toFixed固定小数位数 简单实例分享

    这篇文章介绍了toFixed固定小数位数的简单例子,有需要的朋友可以参考一下
    2013-07-07
  • JavaScript中的await/async的作用和用法

    JavaScript中的await/async的作用和用法

    await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了。这篇文章主要介绍了JavaScript中的await/async的作用和用法的相关资料
    2016-10-10
  • webpack-dev-server核心概念案例详解

    webpack-dev-server核心概念案例详解

    这篇文章主要介绍了webpack-dev-server核心概念案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-09-09
  • JavaScript面向对象的程序设计(犯迷糊的小羊)

    JavaScript面向对象的程序设计(犯迷糊的小羊)

    这篇文章主要介绍了JavaScript面向对象的程序设计(犯迷糊的小羊),需要的朋友可以参考下
    2018-05-05
  • 使用validate.js实现表单数据提交前的验证方法

    使用validate.js实现表单数据提交前的验证方法

    这篇文章主要介绍了使用validate.js实现表单数据提交前的验证方法,文中给大家提供了完整代码,需要的朋友可以参考下
    2018-09-09
  • 使用js实现html标签、文本的隐藏、显示、删除及添加

    使用js实现html标签、文本的隐藏、显示、删除及添加

    在设计网页时,有时需要静态或动态地隐藏标签或显示被隐藏的标签,那该怎么实现呢?这篇文章主要给大家介绍了关于使用js实现html标签、文本的隐藏、显示、删除及添加的相关资料,需要的朋友可以参考下
    2023-06-06

最新评论