webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add: 模板字面量

Browse Source
This commit is contained in:
qianguyihao 2020-06-07 21:58:03 +08:00
parent 03a3841ab0
commit 164101cc39
3 changed files with 178 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
00-前端工具/01-VS Code的使用.md
View File

@ -805,6 +805,9 @@ css 颜色管理。
### vscode-pigments ### vscode-pigments
### 颜色标注
css 颜色高亮显示。 css 颜色高亮显示。
## 八、主题插件 ## 八、主题插件
@ -821,6 +824,7 @@ css 颜色高亮显示。
* `SynthWave '84` * `SynthWave '84`
## 最后一段 ## 最后一段
如果你有什么推荐的 VS Code 插件，欢迎留言。 如果你有什么推荐的 VS Code 插件，欢迎留言。
@ -838,3 +842,5 @@ css 颜色高亮显示。
- [https://segmentfault.com/a/1190000012811886](https://segmentfault.com/a/1190000012811886) - [https://segmentfault.com/a/1190000012811886](https://segmentfault.com/a/1190000012811886)
- [「Vscode」打造类 sublime 的高颜值编辑器](https://idoubi.cc/2019/07/08/vscode-sublime-theme/) - [「Vscode」打造类 sublime 的高颜值编辑器](https://idoubi.cc/2019/07/08/vscode-sublime-theme/)
- [Mac Vscode快捷键](https://lsqy.tech/2020/03/14/20200314Mac-Vscode%E5%BF%AB%E6%8D%B7%E9%94%AE/)

43
04-JavaScript基础/04-基本数据类型：String & Number & Boolean.md
View File

@ -179,7 +179,6 @@ let name = 'qianguyihao';
console.log(`我是${name}`); // 打印结果：我是 qianguyihao console.log(`我是${name}`); // 打印结果：我是 qianguyihao
``` ```
### 在模板字面量中插入表达式 ### 在模板字面量中插入表达式
在字符串中插入表达式，以往的写法必须是这样的： 在字符串中插入表达式，以往的写法必须是这样的：
@ -197,10 +196,52 @@ const b = 10;
console.log(`this is ${a + b} and console.log(`this is ${a + b} and
not ${2 * a + b}.`); not ${2 * a + b}.`);
```
打印结果：
``` ```
this is 15 and
not 20.
```
### 换行时不容易出错
上面的例子中，也可以看出这个特征。
### 在模板字面量中插入函数返回值
举例：
```js
function getName() {
return 'qianguyihao';
}
console.log(`www.${getName()}.com`); // 打印结果：www.qianguyihao.com
```
### 模板字面量支持嵌套使用
```js
const nameList = ['千古壹号', '许嵩', '解忧少帅'];
function myTemplate() {
// join('') 的意思是，把数组里的内容合并成一个字符串
return `<ul>
${nameList
.map((item) => `<li>${item}</li>`)
.join('')}
</ul>`;
}
document.body.innerHTML = myTemplate();
```
效果如下：
![](http://img.smyhvae.com/20200607_2118.png)
## 数值型：Number ## 数值型：Number

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

@ -1,4 +1,3 @@
## 前言 ## 前言
> 在日常开发中，String 对象（字符串对象）的使用频率是非常高的。所以有必要详细介绍。 > 在日常开发中，String 对象（字符串对象）的使用频率是非常高的。所以有必要详细介绍。
@ -7,70 +6,74 @@
字符串的常见方法如下。 字符串的常见方法如下。
## indexOf()/lastIndexOf()：获取指定字符的索引 ## 查找字符串
### indexOf()/lastIndexOf()：获取指定字符的索引
> 这个方法，是使用频率最高的一个方法。 > 这个方法，是使用频率最高的一个方法。
### 语法
**语法 1**：
**语法1**：
```javascript ```javascript
索引值 = str.indexOf(想要查询的字符); 索引值 = str.indexOf(想要查询的字符);
``` ```
解释：`indexOf()` 是从前向后索引字符串的位置。同理，`lastIndexOf()`是从后向前寻找。 解释：`indexOf()` 是从前向后查找字符串的位置。同理，`lastIndexOf()`是从后向前寻找。
**作用**：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其**第一次出现**的索引；如果没有找到指定的内容，则返回 -1。 **作用**：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其**第一次出现**的索引；如果没有找到指定的内容，则返回 -1。
因此可以得出一个技巧： 因此可以得出一个重要技巧：
- **如果获取的索引值为0，说明字符串是以查询的参数为开头的**。 - **如果获取的索引值为 0，说明字符串是以查询的参数为开头的**。
- 如果获取的索引值为-1，说明这个字符串中没有指定的内容。 - 如果获取的索引值为-1，说明这个字符串中没有指定的内容。
举例 1：
代码举例1：
```javascript ```javascript
var str = 'abcdea'; const str = 'abcdea';
//给字符查索引(索引值为0,说明字符串以查询的参数为开头) //给字符查索引(索引值为0,说明字符串以查询的参数为开头)
console.log(str.indexOf("c")); console.log(str.indexOf('c'));
console.log(str.lastIndexOf("c")); console.log(str.lastIndexOf('c'));
console.log(str.indexOf("a"));
console.log(str.lastIndexOf("a"));
console.log(str.indexOf('a'));
console.log(str.lastIndexOf('a'));
``` ```
打印结果： 打印结果：
![](http://img.smyhvae.com/20180202_1420.png) ![](http://img.smyhvae.com/20180202_1420.png)
**语法2**： 举例 2：
```js
const name = 'qianguyihao';
console.log(name.indexOf('yi')); // 打印结果：6
```
**语法 2**：
这个方法还可以指定第二个参数，用来指定查找的**起始位置**。语法如下： 这个方法还可以指定第二个参数，用来指定查找的**起始位置**。语法如下：
```javascript ```javascript
索引值 = str.indexOf(想要查询的字符, [起始位置]); 索引值 = str.indexOf(想要查询的字符, [起始位置]);
``` ```
代码举例2：（两个参数时，需要特别注意） 举例 3：（两个参数时，需要特别注意）
```javascript ```javascript
var str = 'qianguyihao'; var str = 'qianguyihao';
result = str.indexOf('a', 3); // 从第三个位置开始查找 'a'这个字符 【重要】 result = str.indexOf('a', 3); // 从第三个位置开始查找 'a'这个字符 【重要】
console.log(result); // 打印结果：9 console.log(result); // 打印结果：9
``` ```
上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。 上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。
### indexOf 举例
### 举例
**案例**：查找字符串"qianguyihao"中，所有 `a` 出现的位置以及次数。 **案例**：查找字符串"qianguyihao"中，所有 `a` 出现的位置以及次数。
@ -78,80 +81,82 @@
（1）先查找第一个 a 出现的位置。 （1）先查找第一个 a 出现的位置。
（2）只要indexOf 返回的结果不是 -1 就继续往后查找。 （2）只要 indexOf 返回的结果不是 -1 就继续往后查找。
（3）因为indexOf 只能查找到第一个，所以后面的查找，可以利用第二个参数，在当前索引加1，从而继续查找。 （3）因为 indexOf 只能查找到第一个，所以后面的查找，可以利用第二个参数，在当前索引加 1，从而继续查找。
代码实现： 代码实现：
```js ```js
var str = 'qianguyihao'; var str = 'qianguyihao';
var index = str.indexOf('a'); var index = str.indexOf('a');
var num = 0; var num = 0;
while (index !== -1) { while (index !== -1) {
console.log(index); console.log(index);
num++; // 每打印一次，就计数一次 num++; // 每打印一次，就计数一次
index = str.indexOf('o', index + 1); index = str.indexOf('o', index + 1);
} }
console.log('a 出现的次数是: ' + num); console.log('a 出现的次数是: ' + num);
``` ```
###
## 获取指定位置的字符 ## 获取指定位置的字符
### 1、charAt(index) ### 1、charAt(index)
语法： 语法：
```javascript ```javascript
字符 = str.charAt(index); 字符 = str.charAt(index);
``` ```
解释：返回字符串指定位置的字符。这里的 `str.charAt(index)`和`str[index]`的效果是一样的。 解释：返回字符串指定位置的字符。这里的 `str.charAt(index)`和`str[index]`的效果是一样的。
注意：字符串中第一个字符的下标是 0。如果参数 index 不在 [0, string.length) 之间，该方法将返回一个空字符串。 注意：字符串中第一个字符的下标是 0。如果参数 index 不在 [0, string.length) 之间，该方法将返回一个空字符串。
**代码举例**： **代码举例**：
```javascript ```javascript
var str = new String("smyhvae"); var str = new String('smyhvae');
for (var i = 0; i < str.length; i++) { for (var i = 0; i < str.length; i++) {
console.log(str.charAt(i)); console.log(str.charAt(i));
} }
``` ```
打印结果： 打印结果：
![](http://img.smyhvae.com/20180202_1401.png) ![](http://img.smyhvae.com/20180202_1401.png)
上面这个例子一般不用。一般打印数组和json的时候用索引，打印String不建议用索引。 上面这个例子一般不用。一般打印数组和 json 的时候用索引，打印 String 不建议用索引。
### 2、str[index] ### 2、str[index]
`str.charAt(index)`和`str[index]`的效果是一样的，不再赘述。区别在于：`str[index]`是H5标准里新增的特性。 `str.charAt(index)`和`str[index]`的效果是一样的，不再赘述。区别在于：`str[index]`是 H5 标准里新增的特性。
### 3、charCodeAt(index) ### 3、charCodeAt(index)
语法： 语法：
```javascript ```javascript
字符 = str.charCodeAt(index); 字符 = str.charCodeAt(index);
``` ```
解释：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。 解释：返回字符串指定位置的字符的 Unicode 编码。不会修改原字符串。
在实际应用中，通过这个方法，我们可以判断用户按下了哪个按键。 在实际应用中，通过这个方法，我们可以判断用户按下了哪个按键。
**代码举例**：打印字符串的**占位长度**。 **代码举例**：打印字符串的**占位长度**。
提示：一个英文占一个位置，一个中文占两个位置。 提示：一个英文占一个位置，一个中文占两个位置。
思路：判断该字符是否在0-127之间（在的话是英文，不在是非英文）。 思路：判断该字符是否在 0-127 之间（在的话是英文，不在是非英文）。
代码实现： 代码实现：
@ -159,7 +164,7 @@
<script> <script>
// sort(); 底层用到了charCodeAt(); // sort(); 底层用到了charCodeAt();
var str = "I love my country!我你爱中国！"; var str = 'I love my country!我你爱中国！';
//需求：求一个字符串占有几个字符位。 //需求：求一个字符串占有几个字符位。
//思路；如果是英文，站一个字符位，如果不是英文占两个字符位。 //思路；如果是英文，站一个字符位，如果不是英文占两个字符位。
@ -191,9 +196,9 @@
24 24
``` ```
从打印结果可以看出：字符串的长度是24，但是却占了30个字符位（一个中文占两个字符位）。 从打印结果可以看出：字符串的长度是 24，但是却占了 30 个字符位（一个中文占两个字符位）。
另外，sort()方法其实底层也是用到了charCodeAt()，因为用到了Unicode编码。 另外，sort()方法其实底层也是用到了 charCodeAt()，因为用到了 Unicode 编码。
## String.fromCharCode() ## String.fromCharCode()
@ -202,11 +207,11 @@
代码举例： 代码举例：
```javascript ```javascript
var result1 = String.fromCharCode(72); var result1 = String.fromCharCode(72);
var result2 = String.fromCharCode(20013); var result2 = String.fromCharCode(20013);
console.log(result1); // 打印结果：H console.log(result1); // 打印结果：H
console.log(result2); // 打印结果：中 console.log(result2); // 打印结果：中
``` ```
## concat() ## concat()
@ -219,7 +224,6 @@
解释：字符串的连接。 解释：字符串的连接。
这种方法基本不用，直接把两个字符串相加就好。 这种方法基本不用，直接把两个字符串相加就好。
是的，你会发现，数组中也有`concat()`方法，用于数组的连接。这个方法在数组中用得挺多的。 是的，你会发现，数组中也有`concat()`方法，用于数组的连接。这个方法在数组中用得挺多的。
@ -227,11 +231,11 @@
代码举例： 代码举例：
```javascript ```javascript
var str1 = 'qiangu'; var str1 = 'qiangu';
var str2 = 'yihao'; var str2 = 'yihao';
var result = str1.concat(str2); var result = str1.concat(str2);
console.log(result); // 打印结果：qianguyihao console.log(result); // 打印结果：qianguyihao
``` ```
## slice() ## slice()
@ -239,12 +243,11 @@
语法： 语法：
```javascript ```javascript
字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。 字符串 = str.slice(开始索引, 结束索引); //两个参数都是索引值。包左不包右。
``` ```
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。 解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
注意：上面的参数，包左不包右。参数举例如下： 注意：上面的参数，包左不包右。参数举例如下：
- `(2, 5)` 截取时，包左不包右。 - `(2, 5)` 截取时，包左不包右。
@ -262,14 +265,14 @@
语法： 语法：
```javascript ```javascript
字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。 字符串 = str.substring(开始索引, 结束索引); //两个参数都是索引值。包左不包右。
``` ```
解释：从字符串中截取指定的内容。和`slice()`类似。 解释：从字符串中截取指定的内容。和`slice()`类似。
`substring()`和`slice()`是类似的。但不同之处在于： `substring()`和`slice()`是类似的。但不同之处在于：
- `substring()`不能接受负值作为参数。如果传递了一个**负值**，则默认使用0。 - `substring()`不能接受负值作为参数。如果传递了一个**负值**，则默认使用 0。
- `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`相当于截取的是第一个字符。 - `substring()`还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。比如说， `substring(1, 0)`相当于截取的是第一个字符。
@ -278,79 +281,71 @@
语法： 语法：
```javascript ```javascript
字符串 = str.substr(开始索引, 截取的长度); 字符串 = str.substr(开始索引, 截取的长度);
``` ```
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。 解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
注意，这个方法的第二个参数**截图的长度**，不是结束索引。 注意，这个方法的第二个参数**截取的长度**，不是结束索引。
参数举例： 参数举例：
- `(2,4)` 从索引值为2的字符开始，截取4个字符。 - `(2,4)` 从索引值为 2 的字符开始，截取 4 个字符。
- `(1)` 从指定位置开始，截取到最后。 - `(1)` 从指定位置开始，截取到最后。
- `(-3)` 从倒数第几个开始，截取到最后. - `(-3)` 从倒数第几个开始，截取到最后.
备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。 备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。
## split()：字符串转换为数组 【重要】 ## split()：字符串转换为数组 【重要】
语法： 语法：
```javascript ```javascript
新的数组 = str.split(分隔符); 新的数组 = str.split(分隔符);
``` ```
解释：将一个字符串拆分成一个数组。不会改变原字符串。 解释：将一个字符串拆分成一个数组。不会改变原字符串。
备注：`split()`这个方法在实际开发中用得非常多。一般来说，从接口拿到的 json 数据中，经常会收到类似于`"q, i, a, n"`这样的字符串，前端需要将这个字符串拆分成`['q', 'i', 'a', 'n']`数组，这个时候`split()`方法就派上用场了。
备注：`split()`这个方法在实际开发中用得非常多。一般来说，从接口拿到的json数据中，经常会收到类似于`"q, i, a, n"`这样的字符串，前端需要将这个字符串拆分成`['q', 'i', 'a', 'n']`数组，这个时候`split()`方法就排上用场了。 **代码举例 1**：
**代码举例1**：
```javascript ```javascript
var str = 'qian, gu, yi, hao'; // 用逗号隔开的字符串
var array = str.split(','); // 将字符串 str 拆分成数组，通过逗号来拆分
var str = "qian, gu, yi, hao"; // 用逗号隔开的字符串 console.log(array); // 打印结果是数组：["qian", " gu", " yi", " hao"]
var array = str.split(","); // 将字符串 str 拆分成数组，通过逗号来拆分
console.log(array); // 打印结果是数组：["qian", " gu", " yi", " hao"]
``` ```
**代码举例2**： **代码举例 2**：
```javascript ```javascript
//split()方法：字符串变数组 //split()方法：字符串变数组
var str3 = "生命壹号|许嵩|smyhvae"; var str3 = '生命壹号|许嵩|smyhvae';
console.log(str3); console.log(str3);
console.log(str3.split()); // 无参数，表示：把字符串作为一个元素添加到数组中。 console.log(str3.split()); // 无参数，表示：把字符串作为一个元素添加到数组中。
console.log(str3.split("")); //参数为空字符串，则表示：分隔字符串中每一个字符，分别添加到数组中 console.log(str3.split('')); // 参数为空字符串，则表示：分隔字符串中每一个字符，分别添加到数组中
console.log(str3.split("|")); //参数为指定字符，表示：此字符将不会出现在数组的任意一个元素中 console.log(str3.split('|')); // 参数为指定字符，表示：此字符将不会出现在数组的任意一个元素中
console.log(str3.split("许")); //同理 console.log(str3.split('许')); // 同理
``` ```
打印结果： 打印结果：
![](http://img.smyhvae.com/20180202_1503.png) ![](http://img.smyhvae.com/20180202_1503.png)
## replace() ## replace()
语法： 语法：
```javascript ```javascript
新的字符串 = str.replace(被替换的字符，新的字符); 新的字符串 = str.replace(被替换的字符，新的字符);
``` ```
解释：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。 解释：将字符串中的指定内容，替换为新的内容并返回。不会修改原字符串。
@ -360,15 +355,14 @@
代码举例： 代码举例：
```javascript ```javascript
//replace()方法：替换 //replace()方法：替换
var str2 = "Today is fine day,today is fine day !!!" var str2 = 'Today is fine day,today is fine day !';
console.log(str2); console.log(str2);
console.log(str2.replace("today","tomorrow")); //只能替换第一个today console.log(str2.replace('today', 'tomorrow')); //只能替换第一个today
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today console.log(str2.replace(/today/gi, 'tomorrow')); //这里用到了正则，才能替换所有的today
``` ```
## trim() ## trim()
`trim()`：去除字符串前后的空白。 `trim()`：去除字符串前后的空白。
@ -376,33 +370,36 @@
代码举例： 代码举例：
```javascript ```javascript
//去除前后的空格，trim(); //去除字符串前后的空格，trim();
var str1 = " a b c "; let str = ' a b c ';
console.log(str1); console.log(str);
console.log(str1.trim()); console.log(str.length);
console.log(str.trim());
console.log(str.trim().length);
``` ```
打印结果： 打印结果：
![](http://img.smyhvae.com/20180202_1455.png) ![](http://img.smyhvae.com/20200607_2132.png)
## 大小写转换 ## 大小写转换
举例： 举例：
```javascript ```javascript
var str = "abcdEFG"; var str = 'abcdEFG';
//转换成小写 //转换成小写
console.log(str.toLowerCase()); console.log(str.toLowerCase());
//转换成大写 //转换成大写
console.log(str.toUpperCase()); console.log(str.toUpperCase());
``` ```
## html方法 ## html 方法
- anchor() 创建a链接 - anchor() 创建 a 链接
- big() - big()
@ -414,46 +411,45 @@
- bold() - bold()
注意，str.link() 返回值是字符串。 注意，str.link() 返回值是字符串。
举例： 举例：
```javascript ```javascript
var str = "你好"; var str = '你好';
console.log(str.anchor()) console.log(str.anchor());
console.log(str.big()) console.log(str.big());
console.log(str.sub()) console.log(str.sub());
console.log(str.sup()) console.log(str.sup());
console.log(str.link("http://www.baidu.com")); console.log(str.link('http://www.baidu.com'));
console.log(str.bold()) console.log(str.bold());
``` ```
![](http://img.smyhvae.com/20180202_1536.png) ![](http://img.smyhvae.com/20180202_1536.png)
## 字符串练习 ## 字符串练习
**练习1**："smyhvaevaesmyh"查找字符串中所有m出现的位置。 **练习 1**："smyhvaevaesmyh"查找字符串中所有 m 出现的位置。
代码实现： 代码实现：
```javascript ```javascript
var str2 = "abcoefoxyozzopp"; var str2 = 'abcoefoxyozzopp';
for(var i=0;i<str2.length;i++){ for (var i = 0; i < str2.length; i++) {
//如果指定位置的符号=== "o" //如果指定位置的符号=== "o"
//str2[i] //str2[i]
if( str2.charAt(i)==="o"){ if (str2.charAt(i) === 'o') {
console.log(i); console.log(i);
}
} }
}
``` ```
**练习2**：判断一个字符串中出现次数最多的字符，统计这个次数 **练习 2**：判断一个字符串中出现次数最多的字符，统计这个次数
```html ```html
<script> <script>
var str2 = "smyhvaevaesmyhvae"; var str2 = 'smyhvaevaesmyhvae';
//定义一个json，然后判断json中是够有该属性，如果有该属性，那么值+1;否则创建一个该属性，并赋值为1； //定义一个json，然后判断json中是够有该属性，如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
var json = {}; var json = {};
@ -468,10 +464,9 @@
} }
console.log(json); console.log(json);
console.log('----------------');
console.log("----------------");
//获取json中属性值最大的选项 //获取json中属性值最大的选项
var maxKey = ""; var maxKey = '';
var maxValue = 0; var maxValue = 0;
for (var k in json) { for (var k in json) {
// if(maxKey == ""){ // if(maxKey == ""){
@ -486,8 +481,6 @@
} }
console.log(maxKey); console.log(maxKey);
console.log(maxValue); console.log(maxValue);
</script> </script>
``` ```
@ -497,10 +490,8 @@
## 我的公众号 ## 我的公众号
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外： 扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png) ![](http://img.smyhvae.com/20190101.png)