1.确定字符串中是否含有某个字符串

  • indexof(value,num):可返回某个指定的字符串值在字符串中首次出现的位置。ES5方法,num范围(0~length-1)
  • includes(value,num):返回布尔值,表示是否找到了参数字符串。
  • startsWith(value,num):返回布尔值,表示参数字符串是否在原字符串的头部。
  • endsWith(value,num):返回布尔值,表示参数字符串是否在原字符串的尾部。
let str="Hello world!";
indexof("l",1);//
str.startsWith('world', 6) // true
str.endsWith('Hello', 5) // true
str.includes('Hello', 6) // false

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

2.repeat()

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

'x'.repeat(3);//xxx
a.如果参数为小数,则取整
'x'.repeat(2.9);//xx
b.如果参数是负数或者Infinity(即无穷大),会报错
"x".repeat(-1);RangError
c.如果参数是0到-1之间的小数,取整以后等于-0,repeat视同为0
“x”.repeat(-0.9);//""
d.参数NAN等同0
“x”.repeat(NAN);//""
e.如果参数是祖父穿,则会先转换成数字
"x".repeat("3a");//""
"x".repeat("a3");//""

3.padStart(),padEnd();

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

规则:a.padStartpadEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。

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

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

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

a.
'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba' b.
'xxx'.padStart(2, 'ab') // 'xxx'
'xxx'.padEnd(2, 'ab') // 'xxx'
c.
'abc'.padStart(10, '0123456789')
// '0123456abc'
d.
'x'.padStart(4) // '   x'
'x'.padEnd(4) // 'x '

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

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

    (2).另一个用途是提示字符串格式。

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

3.模板字符串(template string)

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

$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`);

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

$('#list').html(`
<ul>
<li>first</li>
<li>second</li>
</ul>
`.trim());

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

const tmpl = addrs => `
<table>
${addrs.map(addr => `
<tr><td>${addr.first}</td></tr>
<tr><td>${addr.last}</td></tr>
`).join('')}
</table>
`;

如果需要引用模板字符串本身,在需要时执行,可以像下面这样写。

// 写法一
let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!" // 写法二
let str = '(name) => `Hello ${name}!`';
let func = eval.call(null, str);
func('Jack') // "Hello Jack!"

 4.未完待续

ES6 字符串的扩展(待细读)的更多相关文章

  1. es6 字符串的扩展和数值的扩展

    es6字符串的扩展 1. es6新增的一些方法 1.1 includes 判断是否包括在内,返回一个 true or false 1.2 statsWith 判断是否以什么开头,返回一个 true o ...

  2. ES6字符串相关扩展

    变量的解构赋值 // 数组的解构赋值 let [a,b,c] = [1,2,3]; //1,2,3 let [a,b,c] = [,123,]; //undefined 123 undefined l ...

  3. es6字符串的扩展

    字符串的扩展 Unicode表示法:大括号包含表示Unicode字符(\u{0xXX}或\u{0XXX}) 字符串遍历:可通过for-of遍历字符串 字符串模板:可单行可多行可插入变量的增强版字符串 ...

  4. ES6 字符串的扩展

    字符的Unicode表示法 JavaScript允许采用\uXXXX形式表示一公分字符,其中XXXX表示字符的码点. "\u0061" //"a" 但是,这种表 ...

  5. es6字符串的扩展学习笔记

    1. 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法. includes():返回布尔值,表示是否找到了参数字符串. st ...

  6. es6字符串的扩展——模板

    todo1.模板字符串 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b&g ...

  7. ES6 - 字符串的扩展(模版字符串)

    模板字面量的最简单语法,是使用反引号( `)(Tab上面那个键)来包裹普通字符串,而不是用双引号或单引号. <!DOCTYPE html> <html lang="en&q ...

  8. ES6模板字符串及字符串的扩展方法

    一.ES6模板字符串 传统定义字符串的方式是: const str='hello es2015,this is a string' ES6新增了一种定义字符串的方式用反引号进行标识 const str ...

  9. ES6走一波 字符串的扩展

    ES6字符串扩展: 处理大码点字符 字符的Unicode表示法 \uxxxx表示一个字符串,超出 \u0000 ~ \uffff范围,必须用两个双字节形式表示. ES6改进为 将码点放到大括号 可正确 ...

随机推荐

  1. Git复习(九)之理解git工作区和暂存区

    前言 Git和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念. 版本库 在工作区目录中有一个.git文件,这个其实不是工作区而是Git的版本库 版本库中包含两个部分,一个是暂存区index/ ...

  2. QuickSort(快排)的JAVA实现

    QuickSort的JAVA实现 这是一篇算法课程的复习笔记 用JAVA对快排又实现了一遍. 先实现的是那个easy版的,每次选的排序轴都是数组的最后一个: package com.algorithm ...

  3. O001、写在最前面

    参考https://www.cnblogs.com/CloudMan6/p/5224114.html   <每天5分钟玩转 OpenStack>       1.系统讲解 OpenStac ...

  4. 06 基本数据结构 - 双端队列(Deque)

    一.双端队列(Deque) - 概念:deque(也称为双端队列)是与队列类似的项的有序集合.它有两个端部,首部和尾部,并且项在集合中保持不变. - 特性:deque 特殊之处在于添加和删除项是非限制 ...

  5. 彻底了解websocket原理

    一.websocket与http WebSocket是HTML5出的东西(协议),也就是说HTTP协议没有变化,或者说没关系,但HTTP是不支持持久连接的(长连接,循环连接的不算) 首先HTTP有 1 ...

  6. webpack 打包 UglifyJs 报错

    Vue-cli 打包报错: ERROR in static/js/4.784ab4a1238de8e94312.js from UglifyJs Unexpected token: 原因:Uglify ...

  7. Ubuntu - 14.04下,GO语言的安装!

    一,下载GO语言的安装文件,我直接下载GO语言的安装包(64位),并不是源码: 下载地址: 64位:https://storage.googleapis.com/golang/go1.6.linux- ...

  8. vue配置路由时报错 Error in render: "RangeError: Maximum call stack size exceeded"

    虽然标题写的是配置路由报错,最终也是通过修改路由解决的,但是导致报错的还有一个主要因素,是因为我增加了一个功能“页面刷新时,根据url高亮左侧导航”,如下图: 1.页面刷新,根据url高亮左侧导航代码 ...

  9. 腾讯地图JSAPI开发demo 定位,查询

    1.IP定位切换 2.点击坐标获取地点 3.查询地点切换坐标 <!DOCTYPE html> <html> <head> <meta http-equiv=& ...

  10. springboot启动端口占用问题,报错org.apache.catalina.LifecycleException: Protocol handler start failed

    解决办法,找到被占用的端口