本文摘自ECMAScript6入门,转载请注明出处。

一、ES5字符串函数

  concat: 将两个或多个字符的文本组合起来,返回一个新的字符串。
  indexOf: 返回字符串中一个子串第一处出现的索引(从左到右搜索)。如果没有匹配项,返回 -1 。
  charAt: 返回指定位置的字符。
  lastIndexOf: 返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 。
  match: 检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 null。
  substring: 返回字符串的一个子串,传入参数是起始位置和结束位置。
  substr: 返回字符串的一个子串,传入参数是起始位置和长度
  replace: 用来查找匹配一个正则表达式的字符串,然后使用新字符串代替匹配的字符串。
  search: 执行一个正则表达式匹配查找。如果查找成功,返回字符串中匹配的索引值。否则返回 -1 。
  slice: 提取字符串的一部分,并返回一个新字符串(与 substring 相同)。
  split: 通过将字符串划分成子串,将一个字符串做成一个字符串数组。
  length: 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数。
  toLowerCase: 将整个字符串转成小写字母。
  toUpperCase: 将整个字符串转成大写字母。

二、ES6新增常用函数

  传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中。ES6又提供了三种新方法。

  includes():返回布尔值,表示是否找到了参数字符串。
  startsWith():返回布尔值,表示参数字符串是否在源字符串的头部。
  endsWith():返回布尔值,表示参数字符串是否在源字符串的尾部。

  1. var s = 'Hello world!';
  2.  
  3. s.startsWith('Hello') // true
  4. s.endsWith('!') // true
  5. s.includes('o') // true

  repeat(): 返回一个新字符串,表示将原字符串重复n次。

  1. 'x'.repeat(3) // "xxx"
  2. 'hello'.repeat(2) // "hellohello"
  3. 'na'.repeat(0) // ""
  4. 'na'.repeat(2.9) // "nana"
  5. 'na'.repeat(Infinity)// RangeError
  6. 'na'.repeat(-1)// RangeError
  7. 'na'.repeat(-0.9) // ""

  参数如果是小数,会被取整(向下取整)。

  参数是负数或者Infinity,会报错。

  参数是0到-1之间的小数,则等同于0,这是因为会先进行取整运算。0到-1之间的小数,取整以后等于-0repeat视同为0。

  参数NaN等同于0。

  

  ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart用于头部补全,padEnd用于尾部补全。padStartpadEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。

  1. 'x'.padStart(5, 'ab') // 'ababx'
  2. 'x'.padStart(4, 'ab') // 'abax'
  3.  
  4. 'x'.padEnd(5, 'ab') // 'xabab'
  5. 'x'.padEnd(4, 'ab') // 'xaba'

  如果原字符串的长度,等于或大于指定的最小长度,则返回原字符串。

  如果用来补全的字符串与原字符串,两者的长度之和超过了指定的最小长度,则会截去超出位数的补全字符串。

  如果省略第二个参数,则会用空格补全长度。

三、模板字符串

  1. 多行字符串  

  传统的JavaScript语言,输出模板通常是这样写的。

  1. $('#result').append(
  2. 'There are <b>' + basket.count + '</b> ' +
  3. 'items in your basket, ' +
  4. '<em>' + basket.onSale +
  5. '</em> are on sale!'
  6. );

  上面这种写法相当繁琐不方便,ES6引入了模板字符串解决这个问题。

  1. $('#result').append(`
  2. There are <b>${basket.count}</b> items
  3. in your basket, <em>${basket.onSale}</em>
  4. are on sale!
  5. `);

  模板字符串(template string)是增强版的字符串,用反引号(`)标识。它可以当作普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

  如果使用模板字符串表示多行字符串,所有的空格和缩进都会被保留在输出之中。

  2.嵌入变量

  模板字符串中嵌入变量,需要将变量名写在${}之中。

  1. // 字符串中嵌入变量
  2. var name = "Bob", time = "today";
  3. `Hello ${name}, how are you ${time}?`
  1.  

  3.调用函数

  模板字符串之中还能调用函数。

  1. function fn() {
  2. return "Hello World";
  3. }
  4.  
  5. `foo ${fn()} bar`
  6. // foo Hello World bar

  如果大括号中的值不是字符串,将按照一般的规则转为字符串。比如,大括号中是一个对象,将默认调用对象的toString方法。

  如果模板字符串中的变量没有声明,将报错。

  如果大括号内部是一个字符串,将会原样输出。

  1. `Hello ${'World'}`
  2. // "Hello World"

ES6新特性4:字符串的扩展的更多相关文章

  1. ES6新特性:Function函数扩展, 扩展到看不懂

    本文所有Demo的运行环境为nodeJS, 参考:让nodeJS支持ES6的词法----babel的安装和使用 : 函数的默认值: 如果有参数 ,那就用参数, 如果没有参数, 那就用默认的参数: aj ...

  2. javascript ES6 新特性之 扩展运算符 三个点 ...

    对于 ES6 新特性中的 ... 可以简单的理解为下面一句话就可以了: 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中. 作用类似于 Object.assign() ...

  3. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  4. es6的新特性--模板字符串

    这几天简单看了一下深入浅出es6这本书,感觉特实用,学习了一个新特性---模板字符串在项目开发中,拼接字符串是不可缺少的,动态创建dom元素以及js操作数据都要拼接字符串,在es6出来之前,我们都通常 ...

  5. 【微信小程序+ES6新特性应用】字符串模板:美元符号$+大括号{}变量的写法

    1.字符串模板简介 ES6新特性中的字符串模板允许使用英文字符抑音符号`(提示:这里我们不能将其理解为单引号)来创建字符串,并且在该字符串中可以包含都[美元符号+大括号]包裹的变量 格式:consol ...

  6. 前端入门21-JavaScript的ES6新特性

    声明 本篇内容全部摘自阮一峰的:ECMAScript 6 入门 阮一峰的这本书,我个人觉得写得挺好的,不管是描述方面,还是例子,都讲得挺通俗易懂,每个新特性基本都还会跟 ES5 旧标准做比较,说明为什 ...

  7. 34.js----JS 开发者必须知道的十个 ES6 新特性

    JS 开发者必须知道的十个 ES6 新特性 这是为忙碌的开发者准备的ES6中最棒的十个特性(无特定顺序): 默认参数 模版表达式 多行字符串 拆包表达式 改进的对象表达式 箭头函数 =&> ...

  8. 前端学习笔记 --ES6新特性

    前言 这篇博客是我在b站进行学习es6课程时的笔记总结与补充. 此处贴出up主的教程视频地址:深入解读ES6系列(全18讲) 1.ES6学习之路 1.1 ES6新特性 1. 变量 2. 函数 3. 数 ...

  9. ES6 新特性

    ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...

  10. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

随机推荐

  1. mongodb常用的查询命令例子

    取 time 字段的最大值: db.getCollection('CallLog').find().sort({"time":-1}).limit(1) 最小值只需要把 –1 改成 ...

  2. mac 更新macOS Sierra 之后无法正常关机

    参考网址h:ttps://www.zhihu.com/question/50940249 这里就简单记录一下,因为网上写的仔细的比较少,我也写一份,希望病友们可以更方便的找到解决办法 其实就是mysq ...

  3. java图形界面之图形化按钮

    要将按钮图形化,只需创建一个ImageIcon对象,将图形路径赋予ImageIcon对象,然后将该对象传递给按钮即可. 此处涉及eclipse中图形的路径设置,包括(项目路径下.非项目路径下.相对路径 ...

  4. VMware安装vnwaretools

    1. 在VMware Fusion 6.0.4下安装Ubuntu镜像:ubuntu-14.04.1-desktop-amd64.iso 2. 点击虚拟机菜单栏-安装VMware Tools 3. 进入 ...

  5. HTML meta标签总结,HTML5 head meta属性整理

    原文链接:http://caibaojian.com/mobile-meta.html <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -- ...

  6. C语言各类型大小,结构体大小 sizeof(struct A)

    C语言类型大小总览 编译器pack指令 #pragma pack(n)——定义n字节对齐 C++固有类型的对齐取编译器对齐与自身大小中较小的一个 32位C++默认8字节对齐.gcc编译器默认4字节对齐 ...

  7. Android解析ActivityManagerService(一)AMS启动流程和AMS家族

    前言 此前在Android系统启动流程.应用进程以及深入四大组件这三个系列文章中,都提及到了AMS,但都没有系统的来讲解它,本文就以AMS为主来进行讲解,其中会有一些知识点与这些系列文章有所重合,这里 ...

  8. Storm并行度

    1.Storm并行度相关的概念 Storm集群有很多节点,按照类型分为nimbus(主节点).supervisor(从节点),在conf/storm.yaml中配置了一个supervisor有多个槽( ...

  9. Linux服务器安装redis数据库教程

    前面小Alan给大家说了jdk的安装,这篇跟大家聊聊redis非关系型数据库在Linux服务器的安装. redis简单介绍 REmote DIctionary Server(Redis) 是一个由Sa ...

  10. 009_svn配置多仓库与权限控制(Alpha)

    1,配置多仓库 实际项目中,我们会同时开发多个项目,通过SVNserve进行仓库监管,但是监管命令只能同时监管一个文件夹,而不能同时监管多个仓库. 解决方法: 可以通过监管总目录来监管所有仓库 SVN ...