ES6精华:字符串扩展
1 四字节字符
ES6
大幅增强了对4字节(32位)字符的支持。
JS
内部使用UTF-16
编码规则(网页通常为UTF-8
)。
1字符固定为2字节,1字节为8位(二进制),其码点小于0xFFFF
。
有些符号的码点大于0xFFFF
,需4字节表示,即常说的32位UTF-16
字符。
1.1 表示方法
新增一种表示字符的方法:\u{20BB7}
。
用{}
将码点括起,使其可直接表示超过0xFFFF
的值。
let str1 = '?'; // 非吉,虽也读作 jí 。
let str2 = '\u{20BB7}';
let str3 = '\uD842\uDFB7';console.log(str1 === str2); // true
console.log(str2 === str3); // true
4字节字符的两种表示有固定的转化规则,不是简单的相加。
let c = 0x20BB7;
let ch = 0xD842;
let cl = 0xDFB7;console.log( H(Number(c)) === ch ); // true
console.log( L(Number(c)) === cl ); // truefunction H(c) {return Math.floor((c - 0x10000) / 0x400) + 0xD800;
}
function L(c) {return (c - 0x10000) % 0x400 + 0xDC00;
}
1.2 codePoint 系列
codePointAt & charCodeAt
使用.codePointAt(0)
正确读取到完整的4字节字符。
let str = '?';console.log( str.charCodeAt(0) ); // 55362,即 \uD842 。
console.log( str.charCodeAt(1) ); // 57271,即 \uDFB7 。
console.log( str.codePointAt(0) ); // 134071,即 \u{20BB7} ,即 ?。
console.log( str.codePointAt(1) ); // 57271,即 \uDFB7 。
fromCodePoint & fromCharCode
使用String.fromCodePoint()
正确读取大于0xFFFF
的32位字符的码点。
console.log( String.fromCharCode(0x20BB7) ); // 解析不成功,已超过 0xFFFF 。
console.log( String.fromCodePoint(0x20BB7) ); // '?',即'\u{20BB7}'。console.log( String.fromCharCode(0xD842) + String.fromCharCode(0xDFB7) ); // '?',即 '\uD842\uDFB7' 。
console.log( String.fromCodePoint(0xD842) + String.fromCodePoint(0xDFB7) ); // '?',即 '\uD842\uDFB7' 。
1.3 常用方法集
判断是否为32位字符
console.log(is32Bit('a')); // false
console.log(is32Bit('?')); // truefunction is32Bit(s) {return s.codePointAt(0) > 0xFFFF;
}
获取正确的字符长度
let str = 'a?b';console.log( getStringLength1(str) ); // 3
console.log( getStringLength2(str) ); // 3function getStringLength1(str) {let res = str.match(/[\s\S]/gu);return res ? res.length : 0;
}
function getStringLength2(str) {let res = 0;for (let c of str) { res++; } // 此遍历方法可以正确的识别32位字符。return res;
}
遍历方法
ES5
由于不能正确的识别32位字符,遍历存在隐患。
ES6
可以配合for of
和codePointAt
更为正确的遍历字符串。
依次打印出:a ? b。let str = 'a?b';
for (let c of str) {console.log( String.fromCodePoint( c.codePointAt(0) ) );
}
2 模板字符串
在现行项目中,一般推荐使用模板字符串代替单双引号作为定义字符串的统一规范。
模板字符串是ES6
新增的定义字符串的方式,使用 ` 替代
''或
""`。
其字符串中的空格、缩进和换行等空白字符都会被保留在输出之中。
其字符串中可以使用${}
包裹有待执行的任意JS
代码,包括另一个模板字符串。
let name = 'Wmaker';
let str = `
<div class="header"><p>My name is ${ name }.</p>
</div>
`;console.log(str);
// 输出:
//
// <div class="header">
// <p>My name is Wmaker.</p>
// </div>
2.1 标签模板
标签模板是函数调用的一种特殊形式: fn`string`
。
实际传入fn
的参数有三类。
一是模板字符串会以/${([\s\S]+?)}/g
为分隔符,拆分形成第一个参数。
二是将各个${}
(输出变量)作为依次的参数。
三是第一个参数中的raw
属性,这个稍后分析。
let words = 'hi';
let name = 'Wmaker';say`Say ${words} to ${name}`;
// --- 等价于
say.apply(null, [['Say ', ' to ', ''],'hi','Wmaker'
]);function say() {console.log(arguments);
}
raw属性
其是为了方便取得转义之前的原始模板而设计的。
其是与第一个参数基本相同,只不过里面的项都是转义之前的(相当再次转义)。
fn`1\n2`;
// --- 等价
fn.apply(null, ['1↵2', raw:['1\n2']]);
实际应用
标签模板的优势在于,不同场景不同参数都可使用同一编译模式。
let words = 'hi';
let name = 'Wmaker';compileTemplate`<p>Say ${words} to ${name}.</p>`; // <p>Say hi to Wmaker.</p>
compileTemplate`<p>Hi ${name}!</p>`; // <p>Hi Wmaker!</p>function compileTemplate() {let strs = arguments[0];let vars = Array.prototype.slice.call(arguments, 1);let res = transformHTML(strs[0]);vars.forEach((item, i) => {res += item + transformHTML(strs[i+1]);});console.log(res);function transformHTML(s) {return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");}
}
3 新增函数
这里只列举一些常用的方法和方式,具体可看:String API。
3.1 normalize()
方法会按照一种指定的Unicode
正规形式将当前字符串正规化。
有些字符有两种不同的表示方法,而且其表示不等价,虽然在结果上等价。
比如有些语言有语调符号和重音符号Ǒ,可以使用带重音符号的字符和原字符与重音符两种表示方法。
let s1 = '\u01D1'; // 'Ǒ'
let s2 = '\u004F\u030C'; // 'Ǒ'console.log(s1 === s2); // false
console.log(s1.normalize() === s2.normalize()); // true
3.2 padStart() & padEnd()
从头/尾部补全字符的长度,对填充物的态度是多则重复少则裁剪。
为数值补全指定位数。
'1'.padStart(5, '0'); // "00001"提示字符串格式。
'12'.padStart(10, 'YYYY-MM-DD'); // "YYYY-MM-12"
3.3 String.raw()
用来充当模板字符串的处理函数,返回一个斜杠都被转义且变量已被替换的字符串。
let name = 'Wmaker';
let str = String.raw`
<div class=\"header\"><h2>${name}</h2>
</div>
`;console.log(str);
// 输出:
//
// <div class=\"header\">
// <h2>Wmaker</h2>
// </div>
ES6精华:字符串扩展相关推荐
- ES6之字符串扩展方法(常用)
es6这个String对象倒是扩展了不少方法,但是很多都是跟字符编码相关,个人选了几个感觉比较常用的方法: includes 搜索字符的神器 还记得我们之前如何判断某个字符串对象是否包含特地字符的吗? ...
- ES6新特性之字符串扩展
字符串扩展 在ES6中,为字符串扩展了几个新的API: includes() :返回布尔值,表示是否找到了参数字符串. startsWith() :返回布尔值,表示参数字符串是否在原字符串的头部. e ...
- 第六节:ES6为字符串String带来哪些好玩的特性?
工作日的推送尝试一下在晚上发,一个是考虑大家下班了放学了,心情轻松愉悦,适合阅读:另一个是上班时间情绪紧绷,没有心思也没有时间去完整地读完这种技术类的文章.(即便通俗易懂) 第六节,开讲啦...... ...
- 1.19(对象类型判断、复制、in、遍历;深拷贝与浅拷贝;字符串的遍历接口、模板字符串、字符串扩展方法)
1.19(对象类型判断.复制.in.遍历;深浅拷贝;字符串的遍历接口.模板字符串.unicode.字符串扩展方法) 一.对象 1.属性简洁表示法与属性名表达式 let name = "wuy ...
- ES6:字符串转数组
1.字符串转数组 方法一: 使用ES6的数组扩展 .扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. [..."abcdef ...
- ES6 数组的扩展:扩展运算符
文章目录 扩展运算符 应用 扩展运算符 扩展运算符(-)作用是将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]); // 1 2 3console.log(1, ...
- (...)ES6三点扩展运算符
来源:https://www.cnblogs.com/rlann/p/7222150.html (...)ES6三点扩展运算符 扩展运算符将一个数组转为用逗号分隔的参数序列 console.log(. ...
- 【ES6】字符串的拓展
[ES6]字符串的拓展 一.为什么ES6要进行字符拓展? 二.ASCLL码.Unicode编码.UTF-8编码的异同 三.ES6新增的字符串接口 1)codePointAt() 2)codePoint ...
- es6拼接字符串的方式。
文章:es6拼接字符串的方式. 转载于:https://www.cnblogs.com/Tpf386/p/9519007.html
- ES6笔记 -- 字符串拓展
字符串拓展 Unicode 相关 JS 允许使用/uxxxx的Unicode方式显示字符, 但是只限于码点在/u0000~/uFFFF之间, 超过该范围的码点必须用双字节形式表示 ES6 中, 将码点 ...
最新文章
- oracle symonym_oracle vs. SQL 同义词synonym 别名 alias | 学步园
- java中System重定向输出流
- 和日本萌妹一起读深度学习最新论文,阅读难度会降低吗?
- MySQL + Atlas 部署读写分离
- Java对数组的操作(二)——集合与数组的切换
- HTML5 Canvas中创建图像数据
- python发送cookie请求_Python中实现带Cookie的Http的Post请求
- 来来来!Java这些高端技术只有你还不知道
- 研究生开学需要准备的事宜(准研究生和保研必看)
- 电路——I/O口定时翻转电平驱动蜂鸣器注意事项
- ConceptDraw使用Rapid Draw简化流程图教程指南
- STM32串口调试一直打印 00 00
- vtk 实现mimics软件中的Split/Merge算法
- ai可以滚轮缩放吗_Illustrator CC for MAC按住alt键滑动鼠标无法缩放?
- 敲笨钟(古诗词押 ong 韵)
- index函数python查询所有_Python List index()方法
- 一个无需软件加密文件夹的bat(批处理)文件的分析
- ISDEV : error -6003的解决办法
- android 应用置顶到最前端_Android 将后台应用切换到前台
- 记录梦幻手游PC端辅助开发及设计思路之整体架构
热门文章
- 《ASP.NET MVC 4 实战》----导读
- FineReport中如何用JavaScript自定义地图标签
- 【Git 第2课】 GitHub是什么?
- Big Data Security Part One: Introducing PacketPig
- Javascript绘图
- 最强python技术前沿!什么是python怎么学?通过这篇文字就知道了
- vscode 无法跳转到函数定义_玩转VS Code
- 如何保证接口的幂等性?
- 【Java】5大排序算法总结(插入排序+希尔排序+选择排序+堆排序+冒泡排序)
- 【Java】阶段性总结练习------图书管理系统实现