Vue进阶（五十八）：ES字符串操作：遍历、比较

// " "
// " "

for (let i of text) {
console.log(i);
}

上面代码中，字符串text只有一个字符，但是`for`循环会认为它包含两个字符（都不可打印），而`for...of`循环会正确识别出这一个字符。


`codePointAt`方法是测试一个字符由两个字节还是由四个字节组成的最简单方法。

function is32Bit© {
return c.codePointAt(0) > 0xFFFF;
}
is32Bit(“?”) // true
is32Bit(“a”) // false

### 二、字符串合成比较法 normalize()

‘\u01D1’===‘\u004F\u030C’ //false
‘\u01D1’.length // 1
‘\u004F\u030C’.length // 2

上面代码表示，`JavaScript` 将合成字符视为两个字符，导致两种表示方法不相等。


`ES6` 提供字符串实例的`normalize()`方法，用来将字符的不同表示方法统一为同样的形式，这称为 `Unicode` 正规化。

‘\u01D1’.normalize() === ‘\u004F\u030C’.normalize()
// true

### 三、判断字符串是否包含另一个字符串

let s = ‘Hello world!’;
s.startsWith(‘Hello’) // true
s.endsWith(‘!’) // true
s.includes(‘o’) // true

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = ‘Hello world!’;
s.startsWith(‘world’, 6) // true
s.endsWith(‘Hello’, 5) // true
s.includes(‘Hello’, 6) // false

上面代码表示，使用第二个参数n时，`endsWith`的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。


### 四、字符串重复


`repeat`方法返回一个新字符串，表示将原字符串重复n次。

‘x’.repeat(3) // “xxx”
‘hello’.repeat(2) // “hellohello”
‘na’.repeat(0) // “”

### 五、字符串补全


如果某个字符串不够指定长度，会在头部或尾部补全。`padStart()`用于头部补全，`padEnd()`用于尾部补全。


如果用来补全的字符串与原字符串，两者的长度之和超过了指定的最小长度，则会截去超出位数的补全字符串。

‘abc’.padStart(10, ‘0123456789’)
// ‘0123456abc’

`padStart`常见用途是为数值补全指定位数。下面代码生成 10 位数值字符串。

‘1’.padStart(10, ‘0’) // “0000000001”
‘12’.padStart(10, ‘0’) // “0000000012”
‘123456’.padStart(10, ‘0’) // “0000123456”

另一个用途是提示字符串格式。

‘12’.padStart(10, ‘YYYY-MM-DD’) // “YYYY-MM-12”
‘09-12’.padStart(10, ‘YYYY-MM-DD’) // “YYYY-09-12”

### 六、字符串截取


#### 6.1 substring()

substring(start,end)

用法：


1. `substring(start,end)` 用数学表达式表达区间的话就是截取`[start,end)`;
2. `substring(start)` 没有end相当于`[start,最后一个字符]`;

let str = ‘Hello world’;
let use1 = str.substring(0, 3);
console.log(use1); // Hel
let use2 = str.substring(3,0);
console.log(use2); // hel
let use3 = str.substring(2);
console.log(use3); // llo world

#### 6.2 slice()

slice(start,end)

`slice`用法和`substring`的用法基本一样，只是区别在于：


1. `slice(start,end)` -> `start`不能大于`end`，否则返回空字符串；
2. `slice`可以接受参数是负数，如果是负数的话，规则将按照：字符串的长度和赋值相加，替换掉这个值。举例如下：

let str = ‘abcdefg’ // length = 7
str.slice(1,-4) // bc -> str.slice(1,7-4) -> str.slice(1,3)

### 七、 截取指定位置和指定长度的字符串

substr(start,length)

### 学习笔记

主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

>**HTML/CSS**

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

![](https://img-blog.csdnimg.cn/img_convert/7574c0d5c77ab0b8f8cbc8619d571f38.webp?x-oss-process=image/format,png)

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

![](https://img-blog.csdnimg.cn/img_convert/578bc7e2e5de34d073f07b4d81d361ec.webp?x-oss-process=image/format,png)

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

S3新增单位，弹性盒模型

[外链图片转存中...(img-bRx9Pdcj-1714379747958)]

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

![](https://img-blog.csdnimg.cn/img_convert/b057dce39643098208f039d135b206df.webp?x-oss-process=image/format,png)