ES6 字符串的扩展(待细读)
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.padStart和padEnd一共接受两个参数,第一个参数用来指定字符串的最小长度,第二个参数是用来补全的字符串。
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 字符串的扩展(待细读)的更多相关文章
- es6 字符串的扩展和数值的扩展
es6字符串的扩展 1. es6新增的一些方法 1.1 includes 判断是否包括在内,返回一个 true or false 1.2 statsWith 判断是否以什么开头,返回一个 true o ...
- ES6字符串相关扩展
变量的解构赋值 // 数组的解构赋值 let [a,b,c] = [1,2,3]; //1,2,3 let [a,b,c] = [,123,]; //undefined 123 undefined l ...
- es6字符串的扩展
字符串的扩展 Unicode表示法:大括号包含表示Unicode字符(\u{0xXX}或\u{0XXX}) 字符串遍历:可通过for-of遍历字符串 字符串模板:可单行可多行可插入变量的增强版字符串 ...
- ES6 字符串的扩展
字符的Unicode表示法 JavaScript允许采用\uXXXX形式表示一公分字符,其中XXXX表示字符的码点. "\u0061" //"a" 但是,这种表 ...
- es6字符串的扩展学习笔记
1. 传统上,JavaScript只有indexOf方法,可以用来确定一个字符串是否包含在另一个字符串中.ES6又提供了三种新方法. includes():返回布尔值,表示是否找到了参数字符串. st ...
- es6字符串的扩展——模板
todo1.模板字符串 传统的 JavaScript 语言,输出模板通常是这样写的(下面使用了 jQuery 的方法). $('#result').append( 'There are <b&g ...
- ES6 - 字符串的扩展(模版字符串)
模板字面量的最简单语法,是使用反引号( `)(Tab上面那个键)来包裹普通字符串,而不是用双引号或单引号. <!DOCTYPE html> <html lang="en&q ...
- ES6模板字符串及字符串的扩展方法
一.ES6模板字符串 传统定义字符串的方式是: const str='hello es2015,this is a string' ES6新增了一种定义字符串的方式用反引号进行标识 const str ...
- ES6走一波 字符串的扩展
ES6字符串扩展: 处理大码点字符 字符的Unicode表示法 \uxxxx表示一个字符串,超出 \u0000 ~ \uffff范围,必须用两个双字节形式表示. ES6改进为 将码点放到大括号 可正确 ...
随机推荐
- Yii2 常用代码集合
Yii2.0 对数据库查询的一些简单的操作 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...
- Arduino控制LED灯(开关控制)
问题:当使用"digitalRead(BUT) == 1"控制LED灯时会出现"digitalWrite(LED, ledState);"的值出现跳动. 原因: ...
- Tomcat 7 自动加载类及检测文件变动原理
在一般的 web 应用开发里通常会使用开发工具(如 Eclipse.IntelJ )集成 tomcat ,这样可以将 web 工程项目直接发布到 tomcat 中,然后一键启动.经常遇到的一种情况是直 ...
- 12 Scrapy框架的日志等级和请求传参
一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息. - 日志信息的种类: ERROR : 一般错误 ...
- React源码深度解析视频 某课网(完整版)
<ignore_js_op> [课程介绍]: React毫无疑问是前端界主流的框架,而框架本身就是热点.课程以讲解React实现原理为主,并在实现过程中讲解这么做的原因,带来 ...
- 转载:mysql数据库连接自动断开
转自:https://www.cnblogs.com/ay-a/p/10520425.html MySql连接空闲8小时自动断开引起的问题 一.问题描述 最近遇到了一个奇怪的MySql数据库问 ...
- SuperMap-WMTS服务修改切片集顺序
1.访问iserver的服务接口,找到WMTS服务接口 2.选择切片集的默认顺序
- jq sku实现
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- MySQL5.5配置文件my.ini详解
[client]port = 3306 [mysqld]port = 3306 ##安装目录 basedir="C:/Program Files (x86)/MySQL/MySQL Serv ...
- rabbitmq一键部署脚本
1.新建一个名字叫 auto_install_rabbitmq.sh 的文件 2.将下面脚本拷贝到文件中,具体操作步骤在注释里面 #环境 linux #一键安装rabitmq,在linux环境中使用 ...