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. 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 ...

  2. Arduino控制LED灯(开关控制)

    问题:当使用"digitalRead(BUT) == 1"控制LED灯时会出现"digitalWrite(LED, ledState);"的值出现跳动. 原因: ...

  3. Tomcat 7 自动加载类及检测文件变动原理

    在一般的 web 应用开发里通常会使用开发工具(如 Eclipse.IntelJ )集成 tomcat ,这样可以将 web 工程项目直接发布到 tomcat 中,然后一键启动.经常遇到的一种情况是直 ...

  4. 12 Scrapy框架的日志等级和请求传参

    一.Scrapy的日志等级 - 在使用scrapy crawl spiderFileName运行程序时,在终端里打印输出的就是scrapy的日志信息. - 日志信息的种类: ERROR : 一般错误 ...

  5. React源码深度解析视频 某课网(完整版)

    <ignore_js_op> [课程介绍]:        React毫无疑问是前端界主流的框架,而框架本身就是热点.课程以讲解React实现原理为主,并在实现过程中讲解这么做的原因,带来 ...

  6. 转载:mysql数据库连接自动断开

    转自:https://www.cnblogs.com/ay-a/p/10520425.html MySql连接空闲8小时自动断开引起的问题   一.问题描述 ​ 最近遇到了一个奇怪的MySql数据库问 ...

  7. SuperMap-WMTS服务修改切片集顺序

    1.访问iserver的服务接口,找到WMTS服务接口 2.选择切片集的默认顺序

  8. jq sku实现

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. MySQL5.5配置文件my.ini详解

    [client]port = 3306 [mysqld]port = 3306 ##安装目录 basedir="C:/Program Files (x86)/MySQL/MySQL Serv ...

  10. rabbitmq一键部署脚本

    1.新建一个名字叫 auto_install_rabbitmq.sh  的文件 2.将下面脚本拷贝到文件中,具体操作步骤在注释里面 #环境 linux #一键安装rabitmq,在linux环境中使用 ...