JavaScript 字符串类型详解（包含模板自变量与标签模板）

前言

字符串类型是JS使用非常多的数据类型，也是相对简单的数据类型，本文目的是为大家梳理清除所有与字符串类型相关的函数和技巧。

1.声明定义

javascript是一种动态类型的语言，我们经常声明字符串的方式：
let value = "这是一个字符串";
大家是不是习以为常了？那么我们看一下以下的例子：

let value = "这是一个字符串";
console.log(typeof value); 
let value1 = new String("这是一个字符串");
console.log(typeof value1); 

在 JavaScript 中，你可以通过两种方式定义字符串：使用字符串字面量（如 let value = "这是一个字符串";）或使用 String 构造函数（如 let value1 = new String("这是一个字符串");）

这两种方式的主要区别在于它们创建的字符串类型不同：

当你使用字符串字面量或 String() 函数（不使用 new 关键字）定义字符串时，你创建的是一个字符串原始值。在这种情况下，typeof 运算符返回 "string"。
当你使用 new String() 构造函数定义字符串时，你创建的是一个字符串对象。在这种情况下，typeof 运算符返回 "object"。
这就是为什么在你的代码中，console.log(typeof value); 输出 "string"，而 console.log(typeof value1); 输出 "object"的原因；
虽然字符串原始值和字符串对象在很多行为上是相似的，但还是有一些重要的区别：

let strPrim = "hello"; // 字符串原始值
let strObj = new String("hello"); // 字符串对象

console.log(typeof strPrim); // 输出："string"
console.log(typeof strObj); // 输出："object"

strPrim.myProperty = "value"; // 尝试给字符串原始值添加属性
strObj.myProperty = "value"; // 给字符串对象添加属性

console.log(strPrim.myProperty); // 输出：undefined
console.log(strObj.myProperty); // 输出："value"

在这个例子中，尝试给字符串原始值 strPrim 添加属性将失败，而给字符串对象 strObj 添加属性则成功。

2.转义符

之所以存在转义符主要是因为有些字符有双重含义，比如单引号（'）在js是字符串边界符，如果想要输出引号时需要使用转义符号。

let value = '百度网址是: \'baidu.com\'';
console.log(value);

常用转义符列表

符号	说明
\t	制表符
\n	换行符
\	斜杠符号
\'	单引号
\"	双引号

这里需要说明以下在html种$nbsp 是一个字体字符，代表不换行空格；
 的常见用途是防止浏览器在 HTML 页面中截断空格。如果你在文本中写入10个空格，浏览器会删除其中的9个。要在文本中添加真正的空格，你可以使用  
和我们说的字符串转义是没有关系的，因为js字符串中间你输入的空格会被完整的保留。

3.字符串连接（模板自变量）

字符串拼接一般常用'+'来连接左右2边的字符串。

let age = 18,
    name = '舒淇';
console.log(name + '永远' + age + '岁');

这样写没问题，但是还有另外一种方式——模板自变量

function fu(){
    return 20;
};

let age = 18,
    name = '舒淇';
console.log(`${name}永远${age}岁`);
console.log(`${name}永远${age+1}岁`);
console.log(`${name}永远${fu()}岁`);

可以发现，使用模板自变量自由程度更高，支持表达式和函数。 可读性也更好。但是需要注意，模板自变量必须在反引号中。

5.标签模板

标签模板是 JavaScript 中模板字符串的一种高级形式，它允许你使用函数解析模板字符串。这种特性在处理结构已知，需要对变量进行动态处理的场景时非常有用。

let name = '舒淇';
let web = '百度百科';
aaa `访问${web}了解${name}资料`

function aaa(strings, ...values) {

    console.log(strings);
    console.log(values); 
}

打印结果：

需要强调的是：标签模板使用格式只能是这样，不能够将反引号中的内容传递给变量在使用，那样会将整体当成参数处理！

let name = '舒淇';
let web = '百度百科';
let bbb = `访问${web}了解${name}资料`

aaa `${bbb}`;


function aaa(strings, ...values) {
    //完整打印
    console.log(strings); 
    console.log(values); 
}

6.获取字符串长度

let str = "比亚迪掀桌子了！"
console.log(str.length) ;//8

7.字符串大小写转换

let str = "Hello World";
console.log(str.toUpperCase()) ;//转大写
console.log(str.toLowerCase()) ;//转小写

7.移除字符串空白

let str = "   123   456   ";//前后中间各敲3个空格
console.log(str.length); // 输出 3+6+3+3=15

console.log(str.trimStart().length); // 删除前边的空格 15-3=12
console.log(str.trimEnd()和().length); // 删除后边的空格 15-3=12
console.log(str.trim().length); //删除左右2边的空格 15-3-3=9

trimStart()和trimLeft()作用相同
trimEnd()和trimRight()作用相同

8.获取字符串中某个字符

let str = "中华人民共和国";
console.log(str.charAt(3));//民

9.截取字符串

在JavaScript中，slice(), substr(), 和 substring() 都是用来截取字符串的方法。你只需要记住substr和substring的区别就可以了。slice()重复了，没必要记住，见了认识就可以了。

let str = "0123456789";
console.log(str.substring(1,5));
console.log(str.substr(1,5));

substring(start, end)：此方法返回从start索引到end索引之间的子字符串。其中start是开始截取的字符的索引，end是结束截取的字符的索引。如果start和end相等，返回空字符串；如果start大于end，则会交换这两个参数的位置。不包含结尾下标
substr(start, length)：此方法返回从start位置开始，长度为length的子字符串。start是必需的，表示子串的起始下标；length是可选的，表示子串的长度。

10.查找字符串

let str ="abcdefabc";
//从开始获取字符串位置，检测不到时返回 -1
console.log(str.indexOf('b'));
console.log(str.indexOf('b', 3)); //7 从第3个字符向后搜索
//从结束位置获取
console.log(str.lastIndexOf('b')); //7
console.log(str.lastIndexOf('b', 3)); //1从第3个字符向前搜索
// search() 方法用于检索字符串中指定的子字符串  和indexOf()类似
console.log(str.search('ef')) 
//include
console.log(str.includes('abc')) //true
// startsWith 是否是指定位置开始，第二个参数为查找的开始位置。 endswitch相反
console.log(str.startsWith('abe', 0)); //false

11.替换字符串

let str = "my name is zhangsan";

str=str.replace('zhangsan','lisi');

console.log(str);
</script>

12.重复字符串

let str = "my name is zhangsan";

str=str.repeat(2);

console.log(str);

13.以指定数据分割字符串为字符串数组

let name = "shuqi";
console.log(name.split(''));// 把字符串分割成数组
let name1 = "abxccd!sjxch!sx";
console.log(name1.split('!'));

let name = "shuqi";
let namearr = name.split('');
console.log(typeof namearr);
console.log(namearr instanceof Array);// 把字符串分割成数组

说明：namearr instabceof Array 判断namearr是不是数组，比typeof更加准确的判断数据类型。因为在js中数组也是一种特殊的object对象。

最后

以上掌握，js字符串类型应该用起来会得心应手吧。算是给自己做一个笔记。也欢迎大家匹配指正。