webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add: 字符串的常见方法

Browse Source
This commit is contained in:
qianguyihao 2020-06-11 18:11:30 +08:00
parent 7393b270a0
commit a5b28d1627
5 changed files with 247 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

291
04-JavaScript基础/12-内置对象 String：字符串的常见方法.md
View File

@ -8,7 +8,7 @@
## 查找字符串 ## 查找字符串
### indexOf()/lastIndexOf()：获取指定字符的索引 ### 1、indexOf()/lastIndexOf()：获取字符串中指定内容的索引
> 这个方法，是使用频率最高的一个方法。 > 这个方法，是使用频率最高的一个方法。
@ -16,12 +16,12 @@
**语法 1**： **语法 1**：
```javascript ```javascript
索引值 = str.indexOf(想要查询的字符); 索引值 = str.indexOf(想要查询的字符串);
``` ```
解释：`indexOf()` 是从前向后查找字符串的位置。同理，`lastIndexOf()`是从后向前寻找。 备注：`indexOf()` 是从前向后查找字符串的位置。同理，`lastIndexOf()`是从后向前寻找。
**作用**：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其**第一次出现**的索引；如果没有找到指定的内容，则返回 -1。 **解释**：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其**第一次出现**的索引；如果没有找到指定的内容，则返回 -1。
因此可以得出一个重要技巧： 因此可以得出一个重要技巧：
@ -29,7 +29,7 @@
- 如果获取的索引值为-1，说明这个字符串中没有指定的内容。 - 如果获取的索引值为-1，说明这个字符串中没有指定的内容。
举例 1： 举例 1：(查找单个字符)
```javascript ```javascript
const str = 'abcdea'; const str = 'abcdea';
@ -46,7 +46,7 @@ console.log(str.lastIndexOf('a'));
![](http://img.smyhvae.com/20180202_1420.png) ![](http://img.smyhvae.com/20180202_1420.png)
举例 2： 举例 2：（查找字符串）
```js ```js
const name = 'qianguyihao'; const name = 'qianguyihao';
@ -59,7 +59,7 @@ console.log(name.indexOf('yi')); // 打印结果：6
这个方法还可以指定第二个参数，用来指定查找的**起始位置**。语法如下： 这个方法还可以指定第二个参数，用来指定查找的**起始位置**。语法如下：
```javascript ```javascript
索引值 = str.indexOf(想要查询的字符, [起始位置]); 索引值 = str.indexOf(想要查询的字符串, [起始位置]);
``` ```
举例 3：（两个参数时，需要特别注意） 举例 3：（两个参数时，需要特别注意）
@ -101,11 +101,122 @@ console.log('a 出现的次数是: ' + num);
``` ```
### ### 2、search()：获取字符串中指定内容的索引（参数里一般是正则）
**语法**：
```javascript
索引值 = str.search(想要查找的字符串);
索引值 = str.search(正则表达式);
```
备注：`search()` 方法里的参数，既可以传字符串，也可以传正则表达式。
**解释**：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其**第一次出现**的索引；如果没有找到指定的内容，则返回 -1。
举例：
```js
const name = 'qianguyihao';
console.log(name.search('yi')); // 打印结果：6
console.log(name.search(/\yi/i)); // 打印结果：6
```
### 3、includes()：字符串中是否包含指定的内容
**语法**：
```js
布尔值 = str.includes(想要查找的字符串, [position]);
```
**解释**：判断一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回 true；否则返回 false。
参数中的 `position`：如果不指定，则默认为0；如果指定，则规定了检索的起始位置。
```js
const name = 'qianguyihao';
console.log(name.includes('yi')); // 打印结果：true
console.log(name.includes('haha')); // 打印结果：false
console.log(name.includes('yi',7)); // 打印结果：false
```
### 4、startsWith()：字符串是否以指定的内容开头
**语法**：
```js
布尔值 = str.startsWith(想要查找的内容, [position]);
```
**解释**：判断一个字符串是否以指定的子字符串开头。如果是，则返回 true；否则返回 false。
**参数中的position**：
- 如果不指定，则默认为0。
- 如果指定，则规定了**检索的起始位置**。检索的范围包括：这个指定位置开始，直到字符串的末尾。即：[position, str.length)
举例：
```js
const name = 'abcdefg';
console.log(name.startsWith('a')); // 打印结果：true
console.log(name.startsWith('b')); // 打印结果：false
// 因为指定了起始位置为3，所以是在 defg 这个字符串中检索。
console.log(name.startsWith('d',3)); // 打印结果：true
console.log(name.startsWith('c',3)); // 打印结果：false
```
### 5、endsWith()：字符串是否以指定的内容结尾
**语法**：
```js
布尔值 = str.endsWith(想要查找的内容, [position]);z
```
**解释**：判断一个字符串是否以指定的子字符串结尾。如果是，则返回 true；否则返回 false。
**参数中的position**：
- 如果不指定，则默认为 str.length。
- 如果指定，则规定了**检索的结束位置**。检索的范围包括：从第一个字符串开始，直到这个指定的位置。即：[0, position)
- 或者你可以这样简单理解：endsWith() 方法里的position，表示**检索的长度**。
注意：startsWith() 和 endsWith()这两个方法，他们的 position 的含义是不同的，请仔细区分。
举例：
```js
const name = 'abcdefg';
console.log(name.endsWith('g')); // 打印结果：true
console.log(name.endsWith('f')); // 打印结果：false
// 因为指定了截止位置为3，所以是在 abc 这个长度为3字符串中检索
console.log(name.endsWith('c', 3)); // 打印结果：true
console.log(name.endsWith('d', 3)); // 打印结果：false
```
注意看上方的注释。
参考链接：[JavaScript endsWith()介绍](https://www.softwhy.com/article-2885-1.html)
## 获取指定位置的字符 ## 获取指定位置的字符
### 1、charAt(index) ### 1、charAt(index)
@ -200,6 +311,75 @@ for (var i = 0; i < str.length; i++) {
另外，sort()方法其实底层也是用到了 charCodeAt()，因为用到了 Unicode 编码。 另外，sort()方法其实底层也是用到了 charCodeAt()，因为用到了 Unicode 编码。
## 字符串截取
### 1、slice()
> slice() 方法用的最多。
语法：
```javascript
新字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。
```
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
注意：上面的参数，包左不包右。参数举例如下：
- `(2, 5)` 截取时，包左不包右。
- `(2)` 表示**从指定的索引位置开始，截取到最后**。
- `(-3)` 表示从倒数第三个开始，截取到最后。
- `(1, -1)` 表示从第一个截取到倒数第一个。
- `(5, 2)` 表示前面的大，后面的小，返回值为空。
### 2、substring()
语法：
```javascript
新字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。
```
解释：从字符串中截取指定的内容。和`slice()`类似。
`substring()`和`slice()`是类似的。但不同之处在于：
- `substring()`不能接受负值作为参数。如果传递了一个**负值**，则默认使用 0。
- `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`相当于截取的是第一个字符。
### 3、substr()
语法：
```javascript
字符串 = str.substr(开始索引, 截取的长度);
```
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
注意，这个方法的第二个参数**截取的长度**，不是结束索引。
参数举例：
- `(2,4)` 从索引值为 2 的字符开始，截取 4 个字符。
- `(1)` 从指定位置开始，截取到最后。
- `(-3)` 从倒数第几个开始，截取到最后.
备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。
## String.fromCharCode() ## String.fromCharCode()
`String.fromCharCode()`：根据字符的 Unicode 编码获取字符。 `String.fromCharCode()`：根据字符的 Unicode 编码获取字符。
@ -238,66 +418,6 @@ var result = str1.concat(str2);
console.log(result); // 打印结果：qianguyihao console.log(result); // 打印结果：qianguyihao
``` ```
## slice()
语法：
```javascript
字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。
```
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
注意：上面的参数，包左不包右。参数举例如下：
- `(2, 5)` 截取时，包左不包右。
- `(2)` 表示**从指定的索引位置开始，截取到最后**。
- `(-3)` 表示从倒数第三个开始，截取到最后。
- `(1, -1)` 表示从第一个截取到倒数第一个。
- `(5, 2)` 表示前面的大，后面的小，返回值为空。
## substring()
语法：
```javascript
字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。
```
解释：从字符串中截取指定的内容。和`slice()`类似。
`substring()`和`slice()`是类似的。但不同之处在于：
- `substring()`不能接受负值作为参数。如果传递了一个**负值**，则默认使用 0。
- `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`相当于截取的是第一个字符。
## substr()
语法：
```javascript
字符串 = str.substr(开始索引, 截取的长度);
```
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
注意，这个方法的第二个参数**截取的长度**，不是结束索引。
参数举例：
- `(2,4)` 从索引值为 2 的字符开始，截取 4 个字符。
- `(1)` 从指定位置开始，截取到最后。
- `(-3)` 从倒数第几个开始，截取到最后.
备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。
## split()：字符串转换为数组 【重要】 ## split()：字符串转换为数组 【重要】
语法： 语法：
@ -350,7 +470,7 @@ console.log(str3.split('许')); // 同理
解释：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。 解释：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。
注意：这个方法，只会替换第一个字符。 注意：这个方法，默认只会替换第一个被匹配到的字符。如果要全局替换，需要使用正则。
代码举例： 代码举例：
@ -363,6 +483,39 @@ console.log(str2.replace('today', 'tomorrow')); //只能替换第一个today
console.log(str2.replace(/today/gi, 'tomorrow')); //这里用到了正则，才能替换所有的today console.log(str2.replace(/today/gi, 'tomorrow')); //这里用到了正则，才能替换所有的today
``` ```
## repeat()：重复字符串
语法：
```js
newStr = str.repeat(重复的次数);
```
解释：将字符串重复指定的次数。会返回新的值，不会修改原字符串。
举例1：
```js
const name = 'qianguyihao';
console.log(name.repeat(2)); // 打印内容：qianguyihaoqianguyihao
```
举例2：（模糊字符串的后四位）
```js
const telephone = '13088889999';
const mix_telephone = telephone.slice(0, -4) + '*'.repeat(4); // 模糊电话号码的后四位
console.log(telephone); // 打印结果：13088889999
console.log(mix_telephone); // 打印结果：1308888****
```
## trim() ## trim()
`trim()`：去除字符串前后的空白。 `trim()`：去除字符串前后的空白。

2
12-React基础/10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为.md
View File

@ -1,7 +1,7 @@
本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 [upload](https://ant.design/components/upload-cn/) 组件。 本次做后台管理系统，采用的是 AntD 框架。涉及到图片的上传，用的是AntD的 [upload](https://ant.design/components/upload-cn/) 组件。
我在上一篇文章《[AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为](https://www.cnblogs.com/qianguyihao/p/13093592.html)》中讲到：AntD 的 upload 组件有很多坑，引起了很多人的关注。折腾过的人，自然明白其中的苦楚。 我在上一篇文章《[前端AntD框架的upload组件上传图片时遇到的一些坑](https://www.cnblogs.com/qianguyihao/p/10460834.html)》中讲到：AntD 的 upload 组件有很多坑，引起了很多人的关注。折腾过的人，自然明白其中的苦楚。
今天这篇文章，我们继续来研究 AntD 的 upload 组件的另一个坑。 今天这篇文章，我们继续来研究 AntD 的 upload 组件的另一个坑。

24
13-前端面试/01-面试必看/00-准备.md
View File

@ -283,25 +283,35 @@ ES6语法：import、export等。
- webpack 打包工具 - webpack 打包工具
## 技术栈准备 ## 前端技术栈准备
![](http://img.smyhvae.com/20180310_1040.png) ![](http://img.smyhvae.com/20180310_1040.png)
上图中，左侧是前端技术核心，右侧是前端工程化。 上图中，左侧是前端技术核心，右侧是前端工程化。
左侧： **左侧**：（前端技术核心）
- jQuery：要注意看源码。看源码时，要看这几个：核心架构、事件委托是什么、插件机制、兼容性。 - jQuery：要注意看源码。看源码时，要看这几个：核心架构、事件委托是什么、插件机制、兼容性。
- 三大框架：都是mvvm框架，准备一至两个即可，或者精心准备一个。面试时会问得很细。比如阿里会经常问Vue的源码。建议找网上的源码分析的文章。 - 三大框架：都是mvvm框架，准备一至两个即可，或者精心准备一个。面试时会问得很细。比如面试官会经常问Vue、React的源码。建议找网上的源码分析的文章。
- Node.js：如果没有相关项目经历，就尽量不要提。 - Node.js：服务器端的运行环境。如果没有相关项目经历，就尽量不要提。
右侧： - JavaScript 基础：框架有时候都很虚；熟练掌握 JavaScript 基础，才是行走江湖、驰骋千里的关键。
**右侧**：（前端工程化）
- npm、yarn：包管理工具。npm的常见命令、npm scripts 怎么用的。
- webpack：模块打包。
- gulp、grunt：构建工具。
- Sass、less：CSS 预处理器。
- Babel：ES6转ES5
- npm：npm的常见命令、npm scripts 怎么用的。
- webpack：有个中文网站，讲的内容比较全。

4
15-前端综合/01-2019年Web前端入门自学路线.md
View File

@ -28,7 +28,7 @@
九、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。 九、Node.js。属于加分项，如果时间不够，可以先不学，但至少要知道 node 环境的配置。
十、自动化工具：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。 十、前端工程化：构建工具 Webpack、构建工具 gulp、CSS 预处理器 Sass 等。注意，Sass 比 Less 用得多，gulp 比 grunt 用得多。
十一、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。 十一、前端综合：HTTP协议、跨域通信、安全问题（CSRF、XSS）、浏览器渲染机制、异步和单线程、页面性能优化、防抖动（Debouncing）和节流阀（Throtting）、lazyload、前端错误监控、虚拟DOM等。
@ -36,6 +36,8 @@
十三、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。 十三、TypeScript（简称TS）。ES 是 JS 的标准，TS 是 JS 的超集。TS属于进阶内容，建议把上面的基础掌握之后，再学TS。
备注：框架有时候都很虚；熟练掌握 JavaScript 基础，才是行走江湖、驰骋千里的关键。
## 推荐的前端图文教程 ## 推荐的前端图文教程
我在GitHub上有一个Web前端入门的学习教程，非常详细，地址是： 我在GitHub上有一个Web前端入门的学习教程，非常详细，地址是：

8
16-推荐链接/02-GitHub项目推荐.md
View File

@ -38,16 +38,16 @@
- [前端精读周刊](https://github.com/dt-fe/weekly) - [前端精读周刊](https://github.com/dt-fe/weekly)
## 前端教程类
## 其他 ## 其他
- 单元测试：<https://github.com/goldbergyoni/javascript-testing-best-practices> - 单元测试：<https://github.com/goldbergyoni/javascript-testing-best-practices>
## 面试 ## 面试
- 前端开发面试题: <https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions>
- web前端面试宝典：<https://github.com/h5bp/Front-end-Developer-Interview-Questions/>
- 反向面试（反问面试官的问题）：<https://github.com/yifeikong/reverse-interview-zh> - 反向面试（反问面试官的问题）：<https://github.com/yifeikong/reverse-interview-zh>
- 掘金前端面试题合集：<https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md> - 掘金前端面试题合集：<https://github.com/shfshanyue/blog/blob/master/post/juejin-interview.md>