一、ES6字符串扩展

字符串模板

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

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

用反引号(`)标识。他可以当做普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量。

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

上面代码中,所有模板字符串的空格和换行,都是被保留的,比如<ul>标签前面会有一个换行。如果你不想要这个换行,可以使用trim方法消除它。

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

大括号内部可以放入任意JavaScript表达式,可以进行计算,以及引用对象属性。

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

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

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

模板字符串甚至还能嵌套。

  includes(), startsWith(), endsWith() 

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

--includes():返回布尔值,表示是否找到了参数字符串。

--startsWith():返回布尔值,表示参数数字字符串是否在原字符串的头部。

--endsWith() :返回布尔值,表示参数数字字符串是否在原字符串的尾部。

这三个方法都是支持第二个参数,表示开始搜索的位置。

上面代码表示,使用第二个参数n时,endsWith的行为与其他两个方法有所不同。它针对前n个字符,而其他两个方法针对从第n个位置直到字符串结束。

  repeat()

repeat方法返回一个新字符串,表示将原字符串重复n次。

如果参数是小数,那么会被取整,且不会进行四舍五入,小数点后的书都会被舍弃掉。

如果repeat的参数是负数或者Infinity,会报错。

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

参数NaN等同于 0。

如果repeat的参数是字符串,则会先转换成数字。

  padStart(),padEnd()

padStart()用于头部补齐,padEnd()用于尾部补齐。

上面代码中,padStart()和padEnd()一共接受两个参数,第一个参数是字符串补全生效的长度,第二个参数是用来补全的字符串。

如果 原字符串的长度大于或等于最大的长度,则字符串不生效,返回原字符串。

如果用来补齐的字符串与原字符串,两者的长度之和超过了最大长度,则会截去超出部分的补全字符串。

如果省略第二个参数,默认使用空格补齐长度。

二、正则的扩展

  RegExp 构造函数

在ES5中,RegExp构造函数的参数有两种情况。

第一种是:参数是字符串,这是第二个参数表示正则表达式的修饰符。

第二种是:参数是正则表达式,这时会返回一个原有正则表达式的拷贝。

但是,在ES5中不允许此时使用第二个参数添加修饰符,否则就会报错。

所以,在ES6中就改变咯额这种行为。如果RegExp构造函数第一个参数是一个正则对象,那么可以使用第二个参数指定修饰符。而且返回的正则表达式会忽略原有的正则表达式的修饰符,只使用新指定的修饰符。

上面的代码中,原有的正则对象的修饰符是ig,他会被第二个参数i覆盖。

     字符串的正则方法

 字符串对象共有4种方法,可以使用正则表达式:match()、replace()、search()、split()。

这4种方法咋语言内部全部调用RegExp的实例方法,从而做到所有与正则相关的方法,全部定义在RegExp对象上。

  • String.prototype.match 调用 RegExp.prototype[Symbol.match]
  • String.prototype.replace 调用 RegExp.prototype[Symbol.replace]
  • String.prototype.search 调用 RegExp.prototype[Symbol.search]
  • String.prototype.split 调用 RegExp.prototype[Symbol.split]

ES6基础(二)的更多相关文章

  1. ES6基础二(数组)

    JSON数组格式转换 JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式:在普通的JSON最后多了一个length属性,就可以使用ES6的语法转变成数组.     当然了,不是所有的j ...

  2. ES6 基础

    转载自:ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来 ...

  3. 新手必看ES6基础

    ES6 基础 一.新的变量声明方式 let/const 与var不同,新的变量声明方式带来了一些不一样的特性,其中最重要的两个特性就是提供了块级作用域与不再具备变量提升. 通过2个简单的例子来说明这两 ...

  4. Python全栈开发【基础二】

    Python全栈开发[基础二] 本节内容: Python 运算符(算术运算.比较运算.赋值运算.逻辑运算.成员运算) 基本数据类型(数字.布尔值.字符串.列表.元组.字典) 其他(编码,range,f ...

  5. Bootstrap <基础二十九>面板(Panels)

    Bootstrap 面板(Panels).面板组件用于把 DOM 组件插入到一个盒子中.创建一个基本的面板,只需要向 <div> 元素添加 class .panel 和 class .pa ...

  6. Bootstrap <基础二十八>列表组

    列表组.列表组件用于以列表形式呈现复杂的和自定义的内容.创建一个基本的列表组的步骤如下: 向元素 <ul> 添加 class .list-group. 向 <li> 添加 cl ...

  7. Bootstrap<基础二十七> 多媒体对象(Media Object)

    Bootstrap 中的多媒体对象(Media Object).这些抽象的对象样式用于创建各种类型的组件(比如:博客评论),我们可以在组件中使用图文混排,图像可以左对齐或者右对齐.媒体对象可以用更少的 ...

  8. Bootstrap <基础二十六>进度条

    Bootstrap 进度条.在本教程中,你将看到如何使用 Bootstrap 创建加载.重定向或动作状态的进度条. Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.Internet ...

  9. Bootstrap <基础二十五>警告(Alerts)

    警告(Alerts)以及 Bootstrap 所提供的用于警告的 class.警告(Alerts)向用户提供了一种定义消息样式的方式.它们为典型的用户操作提供了上下文信息反馈. 您可以为警告框添加一个 ...

  10. Bootstrap<基础二十四> 缩略图

    Bootstrap 缩略图.大多数站点都需要在网格中布局图像.视频.文本等.Bootstrap 通过缩略图为此提供了一种简便的方式.使用 Bootstrap 创建缩略图的步骤如下: 在图像周围添加带有 ...

随机推荐

  1. asp.net core系列 60 Ocelot 构建服务认证示例

    一.概述 在Ocelot中,为了保护下游api资源,用户访问时需要进行认证鉴权,这需要在Ocelot 网关中添加认证服务.添加认证后,ReRoutes路由会进行身份验证,并使用Ocelot的基于声明的 ...

  2. .NETCore 千星项目模块化开发框架 SimplCommerce 详解

    SimplCommerce 是 github 上过千星的.netcore 商城示例项目,本文详解他的模块化框架现实思路,其业务(如产品.订单)不作介绍.因作者文笔水平很差,它又很值得学习和推荐,就算不 ...

  3. Asp.Net Core 轻松学-经常使用异步的你,可能需要看看这个文章

    前言 事情的起因是由于一段简单的数据库连接代码引起,这段代码从语法上看,是没有任何问题:但是就是莫名其妙的报错了,这段代码极其简单,就是打开数据库连接,读取一条记录,然后立即更新到数据库中.但是,惨痛 ...

  4. centos7 修改ip和dns

    RHEL7.CentOS7命令添加和修改网卡IP地址和NDS   RHEL7.CentOS7默认安装之后是没有启动网络连接!(我们就不按6的方试设置IP了,用命令方试添加IP.网关和DNS) 一.设置 ...

  5. Axios发送AJAX请求

    目录 Axios 特征 axios提供主要三种发起请求的方式 方式一:直接axios实例直接call方式 方式二:通过axios实例提供的不同http请求方式的方法 方式三:其实是从第二种方式中单独提 ...

  6. Oracle数据库知识要点

    一.卸载安装(来自百度经验) 完全卸载: 1. 停止相关服务 2. 运行Universal Installer,卸载产品 3. 清理注册表 4. 重启电脑,删除目录(Oracle文件夹和app文件夹) ...

  7. mysql7笔记----遍历节点所有子节点

    mysql遍历节点的所有子节点 DELIMITER // CREATE FUNCTION `getChildrenList`(rootId INT) ) BEGIN ); ); SET sTemp = ...

  8. VIVADO时序约束及STA基础

    一.前言 无论是FPGA应用开发还是数字IC设计,时序约束和静态时序分析(STA)都是十分重要的设计环节.在FPGA设计中,可以在综合后和实现后进行STA来查看设计是否能满足时序上的要求.本文阐述基本 ...

  9. IoC和AOP的理解

    spring 的优点?1.降低了组件之间的耦合性 ,实现了软件各层之间的解耦 2.可以使用容易提供的众多服务,如事务管理,消息服务等 3.容器提供单例模式支持 4.容器提供了AOP技术,利用它很容易实 ...

  10. 如何取消-"插入耳机自动显示提示框"

    首先我们打开控制面板->1,你可以直接搜索控制面板打开  2,你可以右击我的电脑->点击属性->左上角打开控制面板