美文网首页
ES6之字符串扩展

ES6之字符串扩展

作者: hawkzz | 来源:发表于2018-01-15 16:34 被阅读0次

作者原文:http://hawkzz.com/blog/blog/1516005005651

字符串遍历器

字符串可以被for..of循环遍历。

let str = 'hello';
for(let key of str){
    console.log(key);
}

输出:
//h
//e
//l
//l
//o

字符串模板

ES6添加字符串模板,让js能够更加方便的拼接字符串和变量;下面来做个比较:

//ES5

let firstName = 'Jon';
let lastName = 'Smith';
let html = 'My firstName is:' + firstName + 
    ',my lastName is:'+ lastName;
console.log(html);

//ES6

let html = `My firstName is:${firstName},my lastName is:${lastName}`;

从上面两端代码看出,ES6明显在写法上简单,好理解;模板字符串用反引号标识,它可以当普通字符串使用,也可以用来定义多行字符串,或者在字符串中嵌入变量;也拥有计算功能;

let x  = 1;
let y = 2;

let str = `${x} + ${y} = ${x + y}`;
console.log(str);

//输出
1 + 2 = 3;

查询方法

以前,js只能通过indexOf方法返回值是否大于0,判断一个字符串是否包含在另一个字符串中;ES6扩展了几个方法:

  • includes():返回布尔值,表示是否找到了参数字符串
  • startsWith():返回布尔值,表示参数字符串是否在原字符串的头部;
  • endsWith():返回布尔值,表示参数字符串是否在原字符串的尾部;
let str = 'Hello World!';
console.log(str.includes('o'));//true
console.log(str.startsWith('Hello'));//true
console.log(str.endsWith('!'));//true

还可以传第二个参数,表示从什么位置开始搜索;

let str = 'Hello World!';

console.log(str.includes('Hello',2));//false
console.log(str.startsWith('World',6));//true
console.log(str.endsWith('Hello',5));//true

repeat()

ES6新增了一个repeat方法,用来将原字符串重复n次;规则:

  • 参数为数值;
  • 如果参数是小数,会向下取整;
  • 如果参数是负数或者Infinity,报错;
  • 如果参数是0到 -1之间的小数,等同于0;
  • 如果参数是NaN,等同于0;
  • 如果参数是字符串,则先转换为数字;
console.log('x'.repeat(3));//xxx
console.log('xxx'.repeat(0));//""
console.log('x'.repeat(2.8));//xx
console.log('x'.repeat(2.1));//xx
// console.log('x'.repeat(Infinity));//Error
// console.log('x'.repeat(-2));//Error
console.log('x'.repeat(-0.2));//""
console.log('x'.repeat(NaN));//""
console.log('x'.repeat('3'));//xxx

补全长度功能

如果某个字符串不够指定长度,会在头部或者尾部补全;

  • padStart()用于头部补全;
  • padEnd()用于尾部补全;

这两个方法有两个参数,第一个为字符串的总长度len,第二个为用了补全的字符串str;规则:

  • 如果len的长度等于或小于原字符串的长度,则输出原字符串;
  • 如果len的长度小于原字符串的长度与str的长度之和,则截取str超出位数补全字符串;
  • 如果len的长度大于原字符串的长度与str的长度之和,则重复str,截取str超出的位数补全字符串;
  • 如果str没有写,则用空格补全;
let str = 'abc';

console.log(str.padStart(2,'123'));//'abc';
console.log(str.padEnd(2,'123'));//'abc'

console.log(str.padStart(10,'1234567890'));//1234567abc
console.log(str.padEnd(10,'1234567890'));//abc1234567

console.log(str.padStart(10,'123'));//1231231abc
console.log(str.padEnd(10,'123'));//abc1231231

console.log(str.padStart(4));//' abc'
console.log(str.padEnd(4));//'abc '

相关文章

  • es6的数值,函数,字符串扩展

    一、es6的数值扩展 二、es6的函数扩展 代码效果:对象解构在函数中的应用 三、es6字符串扩展 常用方法 代码...

  • ECMAScript6新方法(2)

    字符串扩展 ES6加强了对Unicode的支持,并且扩展了字符串对象。 获取字符unicode编码 通过unico...

  • ES6扩展归纳

    ES6扩展归纳 介绍ES6相比与ES5在原有对象上的扩展,包括字符串、正则、数值、函数、数组、对象等扩展,本文是阮...

  • es6之扩展运算符 三个点(...)

    es6之扩展运算符 三个点(...)对象的扩展运算符数组的扩展运算符总结es6之扩展运算符 三个点(…)对象的扩展...

  • 11.ES6字符串startsWith、endsWith和字符串

    在ES6中字符串扩展了startsWith、endsWith和字符串模板1、startsWith 开始是否包含2、...

  • ES6字符串扩展

    ES6字符串扩展 ES6加强了对 Unicode 的支持(特殊字符) 之前JavaScript允许采用\uxxxx...

  • ES6、ES7语法以及Vue模板语法

    ES6、ES7语法 字符串的扩展 includes(str) : 判断是否包含指定的字符串startsWith(s...

  • ES6入门之内置对象的扩展

    1.字符串的扩展 模板字符串。ES5写法: ES6写法: 新增字符串方法:1 repeat; //复制字符串2 i...

  • Typescript 特性

    Typescript是根据es6来扩展的js 的超集。 字符串的特性有: 多行字符串: 字符串模版 可以使用$+大...

  • 小巧玲珑-ES6之字符串的扩展

    ES6扩展了字符串对象。 一、操作字符串的一些方法 1、字符串的包含 传统上,JavaScript 只有index...

网友评论

      本文标题:ES6之字符串扩展

      本文链接:https://www.haomeiwen.com/subject/unrdoxtx.html