add: 模板字面量
This commit is contained in:
qianguyihao
parent
03a3841ab0
commit
164101cc39
@ -805,6 +805,9 @@ css 颜色管理。
|
||||
|
||||
### vscode-pigments
|
||||
|
||||
### 颜色标注
|
||||
|
||||
|
||||
css 颜色高亮显示。
|
||||
|
||||
## 八、主题插件
|
||||
@ -821,6 +824,7 @@ css 颜色高亮显示。
|
||||
|
||||
* `SynthWave '84`
|
||||
|
||||
|
||||
## 最后一段
|
||||
|
||||
如果你有什么推荐的 VS Code 插件，欢迎留言。
|
||||
@ -838,3 +842,5 @@ css 颜色高亮显示。
|
||||
- [https://segmentfault.com/a/1190000012811886](https://segmentfault.com/a/1190000012811886)
|
||||
|
||||
- [「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/)
|
||||
@ -179,7 +179,6 @@ let name = 'qianguyihao';
|
||||
console.log(`我是${name}`); // 打印结果：我是 qianguyihao
|
||||
```
|
||||
|
||||
|
||||
### 在模板字面量中插入表达式
|
||||
|
||||
在字符串中插入表达式，以往的写法必须是这样的：
|
||||
@ -197,10 +196,52 @@ const b = 10;
|
||||
|
||||
console.log(`this is ${a + b} and
|
||||
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();
|
||||
|
||||
```
|
||||
|
||||
效果如下：
|
||||
|
||||
|
||||
|
||||
|
||||
## 数值型：Number
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
|
||||
## 前言
|
||||
|
||||
> 在日常开发中，String 对象（字符串对象）的使用频率是非常高的。所以有必要详细介绍。
|
||||
@ -7,12 +6,12 @@
|
||||
|
||||
字符串的常见方法如下。
|
||||
|
||||
## indexOf()/lastIndexOf()：获取指定字符的索引
|
||||
## 查找字符串
|
||||
|
||||
### indexOf()/lastIndexOf()：获取指定字符的索引
|
||||
|
||||
> 这个方法，是使用频率最高的一个方法。
|
||||
|
||||
### 语法
|
||||
|
||||
|
||||
**语法 1**：
|
||||
|
||||
@ -20,45 +19,50 @@
|
||||
索引值 = str.indexOf(想要查询的字符);
|
||||
```
|
||||
|
||||
解释：`indexOf()` 是从前向后索引字符串的位置。同理，`lastIndexOf()`是从后向前寻找。
|
||||
解释：`indexOf()` 是从前向后查找字符串的位置。同理，`lastIndexOf()`是从后向前寻找。
|
||||
|
||||
**作用**：可以检索一个字符串中是否含有指定内容。如果字符串中含有该内容，则会返回其**第一次出现**的索引；如果没有找到指定的内容，则返回 -1。
|
||||
|
||||
因此可以得出一个技巧：
|
||||
因此可以得出一个重要技巧：
|
||||
|
||||
- **如果获取的索引值为 0，说明字符串是以查询的参数为开头的**。
|
||||
|
||||
- 如果获取的索引值为-1，说明这个字符串中没有指定的内容。
|
||||
|
||||
|
||||
代码举例1：
|
||||
举例 1：
|
||||
|
||||
```javascript
|
||||
var str = 'abcdea';
|
||||
const str = 'abcdea';
|
||||
|
||||
//给字符查索引(索引值为0,说明字符串以查询的参数为开头)
|
||||
console.log(str.indexOf("c"));
|
||||
console.log(str.lastIndexOf("c"));
|
||||
|
||||
console.log(str.indexOf("a"));
|
||||
console.log(str.lastIndexOf("a"));
|
||||
console.log(str.indexOf('c'));
|
||||
console.log(str.lastIndexOf('c'));
|
||||
|
||||
console.log(str.indexOf('a'));
|
||||
console.log(str.lastIndexOf('a'));
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
举例 2：
|
||||
|
||||
```js
|
||||
const name = 'qianguyihao';
|
||||
|
||||
console.log(name.indexOf('yi')); // 打印结果：6
|
||||
```
|
||||
|
||||
**语法 2**：
|
||||
|
||||
这个方法还可以指定第二个参数，用来指定查找的**起始位置**。语法如下：
|
||||
|
||||
|
||||
```javascript
|
||||
索引值 = str.indexOf(想要查询的字符, [起始位置]);
|
||||
```
|
||||
|
||||
代码举例2：（两个参数时，需要特别注意）
|
||||
举例 3：（两个参数时，需要特别注意）
|
||||
|
||||
```javascript
|
||||
var str = 'qianguyihao';
|
||||
@ -69,8 +73,7 @@
|
||||
|
||||
上方代码中，`indexOf()`方法中携带了两个参数，具体解释请看注释。
|
||||
|
||||
|
||||
### 举例
|
||||
### indexOf 举例
|
||||
|
||||
**案例**：查找字符串"qianguyihao"中，所有 `a` 出现的位置以及次数。
|
||||
|
||||
@ -97,12 +100,16 @@
|
||||
console.log('a 出现的次数是: ' + num);
|
||||
```
|
||||
|
||||
|
||||
###
|
||||
|
||||
|
||||
|
||||
|
||||
## 获取指定位置的字符
|
||||
|
||||
|
||||
### 1、charAt(index)
|
||||
|
||||
|
||||
语法：
|
||||
|
||||
```javascript
|
||||
@ -113,11 +120,10 @@
|
||||
|
||||
注意：字符串中第一个字符的下标是 0。如果参数 index 不在 [0, string.length) 之间，该方法将返回一个空字符串。
|
||||
|
||||
|
||||
**代码举例**：
|
||||
|
||||
```javascript
|
||||
var str = new String("smyhvae");
|
||||
var str = new String('smyhvae');
|
||||
|
||||
for (var i = 0; i < str.length; i++) {
|
||||
console.log(str.charAt(i));
|
||||
@ -146,7 +152,6 @@
|
||||
|
||||
在实际应用中，通过这个方法，我们可以判断用户按下了哪个按键。
|
||||
|
||||
|
||||
**代码举例**：打印字符串的**占位长度**。
|
||||
|
||||
提示：一个英文占一个位置，一个中文占两个位置。
|
||||
@ -159,7 +164,7 @@
|
||||
<script>
|
||||
// sort(); 底层用到了charCodeAt();
|
||||
|
||||
var str = "I love my country!我你爱中国！";
|
||||
var str = 'I love my country!我你爱中国！';
|
||||
|
||||
//需求：求一个字符串占有几个字符位。
|
||||
//思路；如果是英文，站一个字符位，如果不是英文占两个字符位。
|
||||
@ -219,7 +224,6 @@
|
||||
|
||||
解释：字符串的连接。
|
||||
|
||||
|
||||
这种方法基本不用，直接把两个字符串相加就好。
|
||||
|
||||
是的，你会发现，数组中也有`concat()`方法，用于数组的连接。这个方法在数组中用得挺多的。
|
||||
@ -244,7 +248,6 @@
|
||||
|
||||
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
|
||||
|
||||
|
||||
注意：上面的参数，包左不包右。参数举例如下：
|
||||
|
||||
- `(2, 5)` 截取时，包左不包右。
|
||||
@ -283,8 +286,7 @@
|
||||
|
||||
解释：从字符串中截取指定的内容。不会修改原字符串，而是将及截取到的内容返回。
|
||||
|
||||
注意，这个方法的第二个参数**截图的长度**，不是结束索引。
|
||||
|
||||
注意，这个方法的第二个参数**截取的长度**，不是结束索引。
|
||||
|
||||
参数举例：
|
||||
|
||||
@ -294,30 +296,25 @@
|
||||
|
||||
- `(-3)` 从倒数第几个开始，截取到最后.
|
||||
|
||||
|
||||
备注：ECMAscript 没有对 `substr()` 方法进行标准化，因此不建议使用它。
|
||||
|
||||
## split()：字符串转换为数组 【重要】
|
||||
|
||||
|
||||
语法：
|
||||
|
||||
|
||||
```javascript
|
||||
新的数组 = 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**：
|
||||
|
||||
```javascript
|
||||
|
||||
var str = "qian, gu, yi, hao"; // 用逗号隔开的字符串
|
||||
var array = str.split(","); // 将字符串 str 拆分成数组，通过逗号来拆分
|
||||
var str = 'qian, gu, yi, hao'; // 用逗号隔开的字符串
|
||||
var array = str.split(','); // 将字符串 str 拆分成数组，通过逗号来拆分
|
||||
|
||||
console.log(array); // 打印结果是数组：["qian", " gu", " yi", " hao"]
|
||||
```
|
||||
@ -326,27 +323,25 @@
|
||||
|
||||
```javascript
|
||||
//split()方法：字符串变数组
|
||||
var str3 = "生命壹号|许嵩|smyhvae";
|
||||
var str3 = '生命壹号|许嵩|smyhvae';
|
||||
|
||||
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('许')); // 同理
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
|
||||
## replace()
|
||||
|
||||
|
||||
语法：
|
||||
|
||||
```javascript
|
||||
@ -361,14 +356,13 @@
|
||||
|
||||
```javascript
|
||||
//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.replace("today","tomorrow")); //只能替换第一个today
|
||||
console.log(str2.replace(/today/gi,"tomorrow")); //这里用到了正则，才能替换所有的today
|
||||
console.log(str2.replace('today', 'tomorrow')); //只能替换第一个today
|
||||
console.log(str2.replace(/today/gi, 'tomorrow')); //这里用到了正则，才能替换所有的today
|
||||
```
|
||||
|
||||
|
||||
## trim()
|
||||
|
||||
`trim()`：去除字符串前后的空白。
|
||||
@ -376,22 +370,25 @@
|
||||
代码举例：
|
||||
|
||||
```javascript
|
||||
//去除前后的空格，trim();
|
||||
var str1 = " a b c ";
|
||||
console.log(str1);
|
||||
console.log(str1.trim());
|
||||
//去除字符串前后的空格，trim();
|
||||
let str = ' a b c ';
|
||||
console.log(str);
|
||||
console.log(str.length);
|
||||
|
||||
console.log(str.trim());
|
||||
console.log(str.trim().length);
|
||||
```
|
||||
|
||||
打印结果：
|
||||
|
||||
|
||||
|
||||
|
||||
## 大小写转换
|
||||
|
||||
举例：
|
||||
|
||||
```javascript
|
||||
var str = "abcdEFG";
|
||||
var str = 'abcdEFG';
|
||||
|
||||
//转换成小写
|
||||
console.log(str.toLowerCase());
|
||||
@ -419,19 +416,18 @@
|
||||
举例：
|
||||
|
||||
```javascript
|
||||
var str = "你好";
|
||||
var str = '你好';
|
||||
|
||||
console.log(str.anchor())
|
||||
console.log(str.big())
|
||||
console.log(str.sub())
|
||||
console.log(str.sup())
|
||||
console.log(str.link("http://www.baidu.com"));
|
||||
console.log(str.bold())
|
||||
console.log(str.anchor());
|
||||
console.log(str.big());
|
||||
console.log(str.sub());
|
||||
console.log(str.sup());
|
||||
console.log(str.link('http://www.baidu.com'));
|
||||
console.log(str.bold());
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
## 字符串练习
|
||||
|
||||
**练习 1**："smyhvaevaesmyh"查找字符串中所有 m 出现的位置。
|
||||
@ -439,11 +435,11 @@
|
||||
代码实现：
|
||||
|
||||
```javascript
|
||||
var str2 = "abcoefoxyozzopp";
|
||||
var str2 = 'abcoefoxyozzopp';
|
||||
for (var i = 0; i < str2.length; i++) {
|
||||
//如果指定位置的符号=== "o"
|
||||
//str2[i]
|
||||
if( str2.charAt(i)==="o"){
|
||||
if (str2.charAt(i) === 'o') {
|
||||
console.log(i);
|
||||
}
|
||||
}
|
||||
@ -453,7 +449,7 @@
|
||||
|
||||
```html
|
||||
<script>
|
||||
var str2 = "smyhvaevaesmyhvae";
|
||||
var str2 = 'smyhvaevaesmyhvae';
|
||||
|
||||
//定义一个json，然后判断json中是够有该属性，如果有该属性，那么值+1;否则创建一个该属性，并赋值为1；
|
||||
var json = {};
|
||||
@ -468,10 +464,9 @@
|
||||
}
|
||||
console.log(json);
|
||||
|
||||
|
||||
console.log("----------------");
|
||||
console.log('----------------');
|
||||
//获取json中属性值最大的选项
|
||||
var maxKey = "";
|
||||
var maxKey = '';
|
||||
var maxValue = 0;
|
||||
for (var k in json) {
|
||||
// if(maxKey == ""){
|
||||
@ -486,8 +481,6 @@
|
||||
}
|
||||
console.log(maxKey);
|
||||
console.log(maxValue);
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
@ -497,10 +490,8 @@
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**。
|
||||
|
||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user