ES6字符串扩展增加了哪些?

1、对Unicode 的支持:codePointAt()、fromCodePoint()
在ES5中,我们经常使用charAt() 来表示字符存储位置,用charCodeAt() 来表示对应位置字符Unicode 的编码。在JavaScript 内部,字符以UTF-16 的形式存储,每个字符固定为2个字节,对于那些需要4个字节存储的字符并不支持。因此,ES6使用 codePointAt() 方法来支持存储4字节的字符:

var s = '猿';
console.log(s.codePointAt(0)); // 29503

在 ES5 中,从码点返回对应的字符的方法是 fromCharCode(),这个并不能返回字符为32位的utf-16 的字符。ES6 中使用 String.fromCodePoint() 代替:

console.log(String.fromCodePoint(29503)); // 猿

2、字符串的遍历接口: for..of...

for(let str of 'yuan') {
   console.log(str);
}
// y
// u
// a
// n

3、判断字符串是否包含在另一个字符串中
在ES5 中使用的是 indexOf() 方法,在ES6中可以使用includes()、startsWith()、endsWith()三个方法。
includes(): 返回布尔值,表示是否找到了参数字符串。
startsWith():返回布尔值,参数是否在源字符串的头部。
endsWith(): 返回布尔值,参数是否在源字符串的尾部。

var str = "yuan is an animal";
str.startsWith("is"); // false
str.endsWith(" animal"); // true
str.includes("an"); // true

接受第二个参数,可选的,表示开始搜索的位置。

var str = "yuan is an animal";
str.startsWith("a", 1); // false
str.endsWith("an", 3); // false
str.includes("w", 4); // false

使用第二个参数n时,endsWith() 指的是针对前n 个字符,二其它两个方法是指开始位置的字符到结束位置的字符。
4、字符串重复复制:repeat();
repeat() 方法返回一个新字符串,表示将院字符串重复n 次。

'o'.repeat(3); // 'ooo'
'ha'.repeat(2); // 'haha'
'yuan'.repeat(0); ''

注意:当repeat() 方法里的参数为小数时,会自动取整;为负数或者Infinity 时会报错;参数接近为0时,参数为0;参数为NaN、字符串时会先转化为Number 再进行转化。
5、字符串补全:padStart()、padEnd()
表达式:str.padEnd(targetLength [, padString])
第一个参数targetLength 表示指定字符串的长度,第二个参数padString(可选)表示用来补全的字符串。
其它注意事项参照:
padStart():用于头部补全。
padEnd():用于尾部补全。

's'.padStart(4, 'ab'); // 'abas'
's'.padEnd(7, 'dd2'); // '7dd2dd2'

6、模板字符串
语法:

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text`

tag `string text ${expression} string text`

模板字符串使用反引号()来代替普通字符串的单引号和双引号。模板字符串可以包含特定语法(${expression})的占位符。占位符中的表达式和周围的文本会一起传递给一个默认的函数,该函数负责将所有的部分连接起来,如果模板字符串由表达式开头,则该字符串被称为带标签的模板字符串,该表达式通常是一个函数,它会在模板字符串处理后被调用,在输出最终结果前,你都可以通过该函数来对模板字符串进行操作处理,在模板字符中使用反引号(`)时,需要在它前面加上转义符(\)。
多行字符串

console.log(`string text line 1
string text line 2`)
// string text line 1
// string text line 2

表达式插补

var a = 2;
var b = 4;
console.log(`${a + b} is six`) // 6 is six

带标签的模板字符串
更高级的形式模板字面值被标记模板文本。标记使您可以分析模板文本功能。标记功能的第一个参数包含一个字符串值的数组。其余参数时相关的表达式。最后,你的函数可以返回处理好的字符串。

var person = 'Mike';
var age = 28;
function tagFunc(strings, personExp, ageExp) {

  var str0 = strings[0]; // "that "
  var str1 = strings[1]; // " is a "

  // 在技术上,有一个字符串在
  // 最终的表达式 (在我们的例子中)的后面,
  // 但它是空的(""), 所以被忽略.
  // var str2 = strings[2];

  var ageStr;
  if (ageExp > 60){
    ageStr = 'old person';
  } else {
    ageStr = 'young person';
  }
  return str0 + personExp + str1 + ageStr;
}
var output = myTag`that ${ person } is a ${ age }`;
console.log(output);    // that Mike is a young person

rest 参数的写法

let name = '张三',
    age = 20,
    message = show`我来给大家介绍:${name}的年龄是${age}.`;

function show(stringArr,...values){
  let output ="";
  let index = 0
  for(;index<values.length;index++){
        output += stringArr [index]+values[index];
    }
    output += stringArr [index];
    return output;
}
message;       //"我来给大家介绍:张三的年龄是20."

标签函数并不一定需要返回一个字符串

function template(strings, ...keys) {
  return (function(...values) {
    var dict = values[values.length - 1] || {};
    var result = [strings[0]];
    keys.forEach(function(key, i) {
      var value = Number.isInteger(key) ? values[key] : dict[key];
      result.push(value, strings[i + 1]);
    });
    return result.join('');
  });
}

var t1Closure = template`${0}${1}${0}!`;
t1Closure('Y', 'A');  // "YAY!" 
var t2Closure = template`${0} ${'foo'}!`;
t2Closure('Hello', {foo: 'World'});  // "Hello World!"

原始字符串
在标签函数的第一个参数中,存在一个特殊的属性raw,我们可以通过它来访问模板字符串的原始字符串。

function tag(strings, ...values) {
  console.log(strings.raw[0]);
}
tag`strings text line 1 \n string text line 2`;
// strings text line 1 \n string text line 2

此外,使用String.raw()方法创建原始字符串和使用默认的模板函数和字符串连接创建时一样的。

String.raw`hello\n${44+44}!`
// "hello\n88!"

戳我博客

章节目录

1、ES6中啥是块级作用域?运用在哪些地方?
2、ES6中使用解构赋值能带给我们什么?
3、ES6字符串扩展增加了哪些?
4、ES6对正则做了哪些扩展?
5、ES6数值多了哪些扩展?
6、ES6函数扩展(箭头函数)
7、ES6 数组给我们带来哪些操作便利?
8、ES6 对象扩展
9、Symbol 数据类型在 ES6 中起什么作用?
10、Map 和 Set 两数据结构在ES6的作用
11、ES6 中的Proxy 和 Reflect 到底是什么鬼?
12、从 Promise 开始踏入异步操作之旅
13、ES6 迭代器(Iterator)和 for...of循环使用方法
14、ES6 异步进阶第二步:Generator 函数
15、JavaScript 异步操作进阶第三步:async 函数
16、ES6 构造函数语法糖:class 类

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容