ES6学习笔记4：字符串的新增方法

最新推荐文章于 2023-01-16 18:01:59 发布

wujiayucn

最新推荐文章于 2023-01-16 18:01:59 发布

阅读量252

点赞数

分类专栏： # ES6学习笔记文章标签： String对象的方法 String实例对象的方法

本文链接：https://blog.csdn.net/wjyyhhxit/article/details/103118232

版权

ES6学习笔记专栏收录该内容

26 篇文章 4 订阅

订阅专栏

文章目录

字符串对象的新增方法

String对象的方法

String.fromCodePoint()

在ES6中，String.fromCodePoint()方法可以识别大于0xFFFF的字符，弥补了ES5中String.fromCharCode()方法的不足。

如果String.fromCodePoint()方法有多个参数，则它们会被合并成一个字符串返回。

String.raw()

在ES6中，raw()方法返回一个斜杠都被转义的字符串，经常用于模版字符串的处理方法。

String.raw`Hi\n${2+3}!`
// 实际返回的是：'Hi\\n5' ,显示的是转义后的结果：'Hi\n5'

如果原来的字符串的斜杆已经转义，那么String.raw()会再次进行转义。

console.log(String.raw`Hi\\n!`); // `Hi\\\\n!`
console.log(String.raw`Hi\\n!` === `Hi\\\\n!`); // true

String对象实例的方法

codePointAt()

在JavaScript内部，字符以 UTF-16 的格式储存，每个字符固定为2个字节，对于需要4个字节存储的字符（Unicode 码点大于0xFFFF的字符），JavaScript会认为它们是两个字符。

let s = '𠮷';

console.log(s.length); // 2
console.log(s.charCodeAt(0)); // 55362
console.log(s.charCodeAt(1)); // 57271
console.log(s.codePointAt(0)); // 134071
console.log(s.codePointAt(1)); // 57271

在ES6中，codePointAt()方法会正确的返回32位的UTF-16字符的码点。对于那些两个字节储存的常规字符，它的返回结果和charCodeAt()方法相同。

解决需要4个字节存储的字符位置序号占用问题

有时会遇到：

let s = '𠮷a';

s.codePointAt(0).toString(16); // "20bb7"
s.codePointAt(2).toString(16); // "61"

这个时候字符a的位置序号应该是1，但是必须向codePointAt()传入2。

使用for...of解决

let s = '𠮷a';

for(let str of s){
  console.log(str.codePointAt(0).toString(16));
}

// 20bb7
// 61

使用扩展运算符（...）展开进行运算

let arr = [...'𠮷a']; 
console.log(arr.length); // 2

arr.forEach(str => console.log(str.codePointAt(0).toString(16)));

// 20bb7
// 61

判断一个字符是由两个字节还是四个字节组成的最简单的方法

function is32Bit(str){
  return str.codePointAt(0) > 0xFFFF;
}

is32Bit("𠮷") // true
is32Bit("a") // false

###normalize()

对于欧洲游语调符号和重音符号。

为了表示它们，Unicode 提供了两种方法：

直接提供带重音符号的字符
提供合成符号（原字符和重音字符的合成）

这两种方法在视觉和语义上都是等价的，但是在JavaScript不能识别，所以，使用normalize()方法，将字符用不同表示方法统一成一样的形式，这个过程称为：“Unicode 正规化”

####normalize()函数的参数

参数	名称	返回
NFC	标准等价合成（Normalization Form Canonical Composition）	多个简单字符的合成字符
NFD	标准等价分解（Normalization Form Canonical Decomposition）	在标准等价的前提下，返回合成字符分解的多个简单字符
NFKC	兼容等价合成（Normalization Form Compatibility Composition）	合成字符
NFKD	兼容等价分解（Normalization Form Compatibility Decomposition）	在兼容等价的前提下，返回合成字符分解的多个简单字符

标准等价：视觉和语义上的等价
兼容等价：语义上存在等价，但是视觉上不等价

normalize()方法目前不能识别三个或三个以上的字符合成，对于这种情况只能使用正则表达式，通过Unicode编号区间判断

includes()、startsWith()、endsWith()

在传统的JavaScript中，只有indexOf()方法来确定一个字符串是否包含在另一个字符串中。在ES6中，又提供了三种新的方法；

方法名	作用	返回类型
`includes()`	是否找到了参数字符串	boolean
`startsWith()`	参数字符串是否在原字符串的头部	boolean
`endsWith()`	参数字符串是否在原字符串的尾部	boolean

这三个方法都支持第二个参数，表示开始搜索的位置，需要注意的是endsWith()是针对第二个参数前的字符，而includes()和startsWith()是针对第二个参数位置后的字符。

repeat()

repeat(n)方法会返回一个新的字符串，表示将原来的字符串重复了n次；

console.log('x'.repeat(4)); // 'xxxx';
console.log('x'.repeat(3.1)); // 'xxx';
console.log('x'.repeat(0)); // '';
console.log('x'.repeat(-0.8)); // '';
console.log('x'.repeat(NaN)); // '';
console.log('x'.repeat(-1)); // 报错
console.log('x'.repeat(Infinity)); // 报错
console.log('x'.repeat('4')); // 'xxxx'
console.log('x'.repeat('hh')); // ''

需要注意:

如果参数是正小数，会被自动取整
如果是0到-1之间的小数，等同于0。（会先进行取整运算，0到-1之间的小数取整以后位-0,repeat()视-0为0）
参数NaN等同于0
当参数为字符串时，现转换成数字，然后再执行

padStart()、padEnd()

在ES2017中，引入了字符串补全长度的功能，如果字符串不够指定的长度，会在头部或尾部补全。

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

console.log('x'.padStart(5,'ab')); // 'ababx'
console.log('x'.padEnd(5, 'ab')); // 'xabab'
console.log('XXXXX'.padEnd(5, 'ab')); // 'XXXXX'
console.log('abc'.padStart(10, '0123456789')); // '0123456abc'
console.log('x'.padStart(4)); // '   x'

需要注意

如果原字符串的长度等于或者大于最大长度，则字符串补全不生效，返回原字符串
如果用来补全的字符串与原字符串两者的长度超过了最大长度，则会截去超出位数的补全字符串
如果省去第二个参数，默认使用空格补全长度

常见用途

为数值补全指定位数

console.log('1'.padStart(10, '0')); // 0000000001

提示字符串格式

console.log('12'.padStart(10, 'YYYY-MM-DD')); // YYYY-MM-12

trimStart()、trimEnd()

***ES2019***对字符串实例增加了trimStart()和trimEnd()方法，作用和trim()一样。

const s = '  abc  ';
console.log(s.trim()); // 'abc'
console.log(s.trimStart()); // 'abc  '
console.log(s.trimEnd()); // '  abc'

浏览器还部署了两个额外的两个方法：trimLeft()和trimRight()

trimLeft()是trimStart()的别名，只消除字符串头部（左边）的空格
trimRight()是trimEnd()的别名，只消除字符串尾部（右边）的空格
除了空格键，还有tab键、换行符等不可见的空白符号也有效

matchAll()

在matchAll()方法会返回一个正则表达式在当前字符串的所有匹配

console.log('12dasdasd'.match(/[1-9]\d*/g)); // ["12"]

字符串对象原有的方法

String对象的方法

fromCharCode()

描述：从字符编码创建一个字符串（单独的数字 Unicode 编码）

console.log(String.fromCharCode(97)); // a
console.log(String.fromCharCode(72,69,76,76,79)); // HELLO

String对象实例的方法

anchor()

描述：创建 HTML 锚

console.log('abc'.anchor('demo')); // <a name="demo">abc</a>

big()

描述：用大号字体显示字符串

console.log('abc'.big()); // <big>abc</big>

blink()

描述：显示闪动字符串

console.log('abc'.blink()); // <blink>abc</blink>

bold()

描述：用于把字符串显示为粗体

console.log('abc'.bold()); // <b>abc</b>

charAt()

描述：返回指定位置的字符（指定的位置超过字符长度时返回空字符）

console.log('acd'.charAt(2)); // 'd'
console.log('acd'.charAt(4)); // ''

charCodeAt()

描述：返回在指定的位置的字符的 Unicode 编码

console.log('acd'.charCodeAt(2)); // 100

concat()

描述：连接字符串，将参数按顺序转换成字符串，然后连接到字符串的尾部，并返回连接后的字符串，需要注意的是，字符串本身并没有改变。但是建议使用+进行字符串连接，简单明了。

console.log('acd'.concat('cde')); // acdcde
console.log('acd'.concat('d', 'd', 'wqe')); // acdddwqe

fixed()

描述：以打字机文本显示字符串

console.log('acd'.fixed()); // <tt>acd</tt>

fontcolor()

描述：用于按照指定的颜色来显示字符串

console.log('acd'.fontcolor('red')); // <font color="red">acd</font>

fontsize()

描述：使用指定的尺寸来显示字符串

console.log('acd'.fontsize('14px')); // <font size="14px">acd</font>

indexOf()

描述：检索字符串，返回所检索的字符的序列，找不到返回-1

console.log('hello'.indexOf('o')); // 4
console.log('hello'.indexOf('p')); // -1

italics()

描述：使用斜体显示字符串

console.log('hello'.italics()); // <i>hello</i>

lastIndexOf()

描述：返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索，找不到返回-1。

console.log('hello'.lastIndexOf('l')); // 3
console.log('hello'.lastIndexOf('p')); // -1

link()

描述：将字符串显示为链接

console.log('hello'.link('www.csdn.net/')); // <a href="www.csdn.net/">hello</a>

match()

描述：找到一个或多个正则表达式的匹配

console.log('12dasdasd34'.match(/[1-9]\d*/g)); // ["12", "34"]

replace()

描述：替换与正则表达式匹配的子串（当参数为字符串时，只替换第一个匹配的字符串）

console.log('12dasdasd34'.replace(/[1-9]\d*/g, 'ed')); // eddasdasded
console.log('12dasdasd34'.replace('a', '##')); // 12d##sdasd34

search()

描述：检索与正则表达式相匹配的值，匹配不到时返回-1。

console.log('dasdasd123'.search(/[1-9]\d*/g)); // 7

slice(start,end)

描述：字符串截取，以新的字符串返回被提取的部分

console.log('dasdasd123'.slice(3, 8)); // dasd1
console.log('dasdasd123'.slice(-1)); // 3

对于参数：

start：要截取的字符串片断的起始下标，如果是负数，则该参数规定的是从字符串的尾部开始算起的位置，即：-1是最后一个字符，-2是倒数第二个字符，以此类推。
end：要截取的字符串片段的结尾的下标。如果没有指定这个参数，则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。

split()

描述：把字符串分割为字符串数组，

console.log('dasdasd123'.split('')); // ["d", "a", "s", "d", "a", "s", "d", "1", "2", "3"]
console.log('dasdasd123'.split(/[1-9]\d*/g)); // ["dasdasd", ""]
console.log('dasdasd123'.split('', 3)); // ["d", "a", "s"]

substr(start,length) 和 substring(start,stop)

substr() 方法可在字符串中抽取从 start 下标开始的length长度的字符
substring() 方法用于提取字符串中介于start，stop下标之间的字符

console.log('dasdasd123'.substr(2, 5));  // sdasd
console.log('dasdasd123'.substring(2, 5)); // sda

toLocaleLowerCase() 和 toLowerCase()

上面两个方法都是将字符串全部被转换为了小写字符，不同的是：toLocaleLowerCase() 方法按照本地方式把字符串转换为小写。只有几种语言（如土耳其语）具有地方特有的大小写映射，所有该方法的返回值通常与 toLowerCase() 一样。

console.log('QAQAQA'.toLocaleLowerCase()); // qaqaqa
console.log('QAQAQA'.toLowerCase()); // qaqaqa

toUpperCase() 和 toLocaleUpperCase()

上面两个方法都是将字符串全部被转换为了大写字符，不同的是：toLocaleUpperCase() 方法按照本地方式把字符串转换为小写。只有几种语言（如土耳其语）具有地方特有的大小写映射，所有该方法的返回值通常与 toUpperCase() 一样。

console.log('aaaa'.toLocaleUpperCase()); // AAAA
console.log('aaaa'.toUpperCase()); // AAAA

备注：本文是自己学习阮一峰老师的《ECMAScript 6 入门》所做的笔记，大部分例子来源于此书。

wujiayucn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6学习笔记4：字符串的新增方法

目录文章目录字符串对象的新增方法String对象的方法String.fromCodePoint()String.raw()String对象实例的方法codePointAt()解决需要4个字节存储的字符位置序号占用问题判断一个字符是由两个字节还是四个字节组成的最简单的方法includes()、startsWith()、endsWith()repeat()需要注意:padStart()、padEnd...
复制链接

扫一扫