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

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

@ -1,4 +1,3 @@
## 前言 ## 前言
> 在日常开发中，String 对象（字符串对象）的使用频率是非常高的。所以有必要详细介绍。 > 在日常开发中，String 对象（字符串对象）的使用频率是非常高的。所以有必要详细介绍。
@ -7,12 +6,12 @@
字符串的常见方法如下。 字符串的常见方法如下。
## indexOf()/lastIndexOf()：获取指定字符的索引 ## 查找字符串
### indexOf()/lastIndexOf()：获取指定字符的索引
> 这个方法，是使用频率最高的一个方法。 > 这个方法，是使用频率最高的一个方法。
### 语法
**语法 1**： **语法 1**：
@ -20,45 +19,50 @@
索引值 = 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：
```js
const name = 'qianguyihao';
console.log(name.indexOf('yi')); // 打印结果：6
```
**语法 2**： **语法 2**：
这个方法还可以指定第二个参数，用来指定查找的**起始位置**。语法如下： 这个方法还可以指定第二个参数，用来指定查找的**起始位置**。语法如下：
```javascript ```javascript
索引值 = str.indexOf(想要查询的字符, [起始位置]); 索引值 = str.indexOf(想要查询的字符, [起始位置]);
``` ```
代码举例2：（两个参数时，需要特别注意） 举例 3：（两个参数时，需要特别注意）
```javascript ```javascript
var str = 'qianguyihao'; var str = 'qianguyihao';
@ -69,8 +73,7 @@
上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。 上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。
### indexOf 举例
### 举例
**案例**：查找字符串"qianguyihao"中，所有 `a` 出现的位置以及次数。 **案例**：查找字符串"qianguyihao"中，所有 `a` 出现的位置以及次数。
@ -97,12 +100,16 @@
console.log('a 出现的次数是: ' + num); console.log('a 出现的次数是: ' + num);
``` ```
###
## 获取指定位置的字符 ## 获取指定位置的字符
### 1、charAt(index) ### 1、charAt(index)
语法： 语法：
```javascript ```javascript
@ -113,11 +120,10 @@
注意：字符串中第一个字符的下标是 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));
@ -146,7 +152,6 @@
在实际应用中，通过这个方法，我们可以判断用户按下了哪个按键。 在实际应用中，通过这个方法，我们可以判断用户按下了哪个按键。
**代码举例**：打印字符串的**占位长度**。 **代码举例**：打印字符串的**占位长度**。
提示：一个英文占一个位置，一个中文占两个位置。 提示：一个英文占一个位置，一个中文占两个位置。
@ -159,7 +164,7 @@
<script> <script>
// sort(); 底层用到了charCodeAt(); // sort(); 底层用到了charCodeAt();
var str = "I love my country!我你爱中国！"; var str = 'I love my country!我你爱中国！';
//需求：求一个字符串占有几个字符位。 //需求：求一个字符串占有几个字符位。
//思路；如果是英文，站一个字符位，如果不是英文占两个字符位。 //思路；如果是英文，站一个字符位，如果不是英文占两个字符位。
@ -219,7 +224,6 @@
解释：字符串的连接。 解释：字符串的连接。
这种方法基本不用，直接把两个字符串相加就好。 这种方法基本不用，直接把两个字符串相加就好。
是的，你会发现，数组中也有`concat()`方法，用于数组的连接。这个方法在数组中用得挺多的。 是的，你会发现，数组中也有`concat()`方法，用于数组的连接。这个方法在数组中用得挺多的。
@ -244,7 +248,6 @@
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。 解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
注意：上面的参数，包左不包右。参数举例如下： 注意：上面的参数，包左不包右。参数举例如下：
- `(2, 5)` 截取时，包左不包右。 - `(2, 5)` 截取时，包左不包右。
@ -283,8 +286,7 @@
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。 解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
注意，这个方法的第二个参数**截图的长度**，不是结束索引。 注意，这个方法的第二个参数**截取的长度**，不是结束索引。
参数举例： 参数举例：
@ -294,30 +296,25 @@
- `(-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 str = "qian, gu, yi, hao"; // 用逗号隔开的字符串 var array = str.split(','); // 将字符串 str 拆分成数组，通过逗号来拆分
var array = str.split(","); // 将字符串 str 拆分成数组，通过逗号来拆分
console.log(array); // 打印结果是数组：["qian", " gu", " yi", " hao"] console.log(array); // 打印结果是数组：["qian", " gu", " yi", " hao"]
``` ```
@ -326,27 +323,25 @@
```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
@ -361,14 +356,13 @@
```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,22 +370,25 @@
代码举例： 代码举例：
```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());
@ -419,19 +416,18 @@
举例： 举例：
```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 出现的位置。
@ -439,11 +435,11 @@
代码实现： 代码实现：
```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);
} }
} }
@ -453,7 +449,7 @@
```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)