实例方法:includes(), startsWith(), endsWith()

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

  • includes():返回布尔值,表示是否找到了参数字符串。
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部。
  1. let s = 'Hello world!';
  2. s.startsWith('Hello') // true
  3. s.endsWith('!') // true
  4. s.includes('o') // true

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

  1. let s = 'Hello world!';
  2. s.startsWith('world', 6) // true
  3. s.endsWith('Hello', 5) // true
  4. s.includes('Hello', 6) // false

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

实例方法:repeat()

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

  1. 'x'.repeat(3) // "xxx"
  2. 'hello'.repeat(2) // "hellohello"
  3. 'na'.repeat(0) // ""

参数如果是小数,会被取整。

  1. 'na'.repeat(2.9) // "nana"

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

  1. 'na'.repeat(Infinity)
  2. // RangeError
  3. 'na'.repeat(-1)
  4. // RangeError

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

  1. 'na'.repeat(-0.9) // ""

参数NaN等同于 0。

  1. 'na'.repeat(NaN) // ""

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

  1. 'na'.repeat('na') // ""
  2. 'na'.repeat('3') // "nanana"

实例方法:padStart(),padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。

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

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

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

  1. 'xxx'.padStart(2, 'ab') // 'xxx'
  2. 'xxx'.padEnd(2, 'ab') // 'xxx'

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

  1. 'abc'.padStart(10, '0123456789')
  2. // '0123456abc'

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

  1. 'x'.padStart(4) // ' x'
  2. 'x'.padEnd(4) // 'x '

padStart()的常见用途是为数值补全指定位数。下面代码生成 10 位的数值字符串。

  1. '1'.padStart(10, '0') // "0000000001"
  2. '12'.padStart(10, '0') // "0000000012"
  3. '123456'.padStart(10, '0') // "0000123456"

另一个用途是提示字符串格式。

  1. '12'.padStart(10, 'YYYY-MM-DD') // "YYYY-MM-12"
  2. '09-12'.padStart(10, 'YYYY-MM-DD') // "YYYY-09-12"

实例方法:trimStart(),trimEnd()

ES2019 对字符串实例新增了trimStart()trimEnd()这两个方法。它们的行为与trim()一致,trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。

  1. const s = ' abc ';
  2. s.trim() // "abc"
  3. s.trimStart() // "abc "
  4. s.trimEnd() // " abc"

上面代码中,trimStart()只消除头部的空格,保留尾部的空格。trimEnd()也是类似行为。

除了空格键,这两个方法对字符串头部(或尾部)的 tab 键、换行符等不可见的空白符号也有效。

浏览器还部署了额外的两个方法,trimLeft()trimStart()的别名,trimRight()trimEnd()的别名。

实例方法:matchAll()

matchAll()方法返回一个正则表达式在当前字符串的所有匹配,详见《正则的扩展》

ES6中新增的字符串方法的更多相关文章

  1. ES6中新增let命令使用方法

     在ES6中新增了let命令,该命令的用法与var 类似,但是所声明的变量只能在let命令所在的代码块(最接近let 命令的大括号内)中有效果.但是let 又有一些不同于var 的特性. 1.let定 ...

  2. ES6 第七节 ES6中新增的数组知识(1)

    目录 ES6 第七节 ES6中新增的数组知识(1) 第七节 ES6中新增的数组知识(1) JSON数组格式转换 Array.of()方法: find()实例方法: ES6 第七节 ES6中新增的数组知 ...

  3. ES6中的模板字符串和新XSS Payload

    ES6中的模板字符串和新XSS Payload 众所周知,在XSS的实战对抗中,由于防守方经常会采用各种各样严格的过滤手段来过滤输入,所以我们使用的XSS Payload也会根据实际情况作出各种各样的 ...

  4. S5中新增的Array方法详细说明

      ES5中新增的Array方法详细说明 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wor ...

  5. es6中的模版字符串

    目录 字符串拼接 includes() startsWith() endsWith() padStart() es6中的模版字符串替代了原有的字符串拼接功能. 字符串拼接 es5方式 传统的字符串拼接 ...

  6. ES6学习之ES5之后新增的字符串方法

    1.字符串模板:用法:`${变量名}` (好像是C#6.0中也引入了类似的方法.C#中的用法:$"我是{变量名}" ---> $"我叫{name}" ,相 ...

  7. ES6中的模板字符串使用方法

    传统的 JavaScript 语言,输出模板通常是这样写的. $('#result').append( 'There are <b>' + basket.count + '</b&g ...

  8. ES5中新增的Array方法详细说明

    一.前言-索引 ES5中新增的不少东西,了解之对我们写JavaScript会有不少帮助,比如数组这块,我们可能就不需要去有板有眼地for循环了. ES5中新增了写数组方法,如下: forEach (j ...

  9. ES6中新增的数组知识

    JSON数组格式转换 JSON的数组格式就是为了前端快速的把JSON转换成数组的一种格式,我们先来看一下JSON的数组格式怎么写. let  json = {     '0': 'xzblogs', ...

随机推荐

  1. [ZJOI 2012] 网络

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=2816 [算法] 对每种颜色的边建一棵LCT , 维护联通性即可 时间复杂度 : O( ...

  2. POJ2217(最长公共子串)

    Secretary Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 992   Accepted: 408 Descripti ...

  3. Winform安装包出现无法访问网络位置

    1.原因:安装包的安装路径出现了问题 2.如下图:错误路径 3.如下图:正确路径

  4. 一、mysql简述

    该套讲义参考动力节点郭鑫老师的mysql视频整理所得 1.DBMS--数据库管理系统  Data Base Management System eg: mysql数据库管理系统 2.DB--数据库/仓 ...

  5. <正则吃饺子> :关于Guava中 Joiner 和 Splitter 的简单使用

    在现在项目中经常看到 这两个类的使用,开始时候不明白具体是做的什么事情,就单独拿出来学习下了,参照了网上的博文,这里主要是简单的讲讲用法. 具体对这两个类,不做过多介绍,有个在线文档,需要的可以自己去 ...

  6. Sandy and Nuts

    题意: 现在有一个$n$个点的树形图被拆开,现在你知道其中$m$条边,已经$q$对点的$LCA$,试求原先的树有多少种可能. 解法: 考虑$dp$,$f(x,S)$表示$x$的子树内的点集为$S$(不 ...

  7. CodeForces 1110G. Tree-Tac-Toe

    题目简述:给定$n$个节点的树,其中一些节点被染成了白色(其余节点未染色).黑白双方博弈,白先动.轮到黑(白)方时,选择树上的一个未染色的节点并将其染成黑(白)色.率先达成三连色(即存在三个节点$a, ...

  8. 如何在.net项目中使用全局程序集GAC

    在解决已有.net网站问题过程中(之前的同事写的),发现出现dll不存在的情况,build报错 在bin目录下找不到该dll,后来发现是全局程序集,存储在C:\Windows\assembly目录下 ...

  9. u3d shader学习笔记1

    促使我学习SHADER的重要原因是希望深入理解3D渲染的机制,在此基础上可以灵活达到某种效果与性能的平衡,开发出具有良好体验的VR应用. 因为VR应用体验的好坏,直接由游戏的帧率决定,而游戏的帧率则受 ...

  10. as3杂记

    一.内存回收方式: 1.引用计数[没有互相引用] 2.标记清除[fp自己检测是否引用,没有引用的清除] 二.通信方式: 1.http:小型页游[charles抓包查看] 2.socket:大型页游[W ...