理解javaScript的数据类型之字符串类型

js中有六大数据类型，在es6中又新增了symbol唯一数据类型，这七大数据类型支撑起了整个javaScript的生态环境。

六大数据类型其中又分为：
- 基本数据类型：String字符串、Number数值、Boolean布尔、Null空、Undefined未定义
- 引用(复合)数据类型：Object对象 --- 细分：Array数组和Function函数

定义字符串

字符串属于js中的一种通用语言标准，es5语法就是在定义的值两边嵌套单引号或双引号。

let str1 = "hello world";
let Str2 = "我是js的字符串";

这里需要注意一点：

双引号内不可以嵌套双引号，单引号内不可以嵌套单引号

双引号内可以嵌套单引号，单引号内可以嵌套双引号

总结：

不同引号可以相互嵌套，相同引号不能相互嵌套

//单引号定义字符串  --- 双引号可以嵌套单引号
var str1 = "ab'cd'ef";
//双引号定义字符串  --- 单引号可以嵌套双引号
var str2 = '4"5"6';// 双引号不能嵌套双引号 单引号不能嵌套单引号
var str4 = "我"不想"吃"; //报错
var str4 = '是'他'做的'; //报错

字符串转义

因为一些字符被js字符串使用，所以不会在页面中显示出来。

这时候就需要 \ 符号进行转义

//特殊字符 -- \n  换行  \t 制表符 等同于按了一下tab键  \ --- 转义符
let str = "我希望所有人\n\"都好好的\"\t这是我的愿望";
console.log(str);

字符串拼接

字符串的拼接使用 + 号

let str = "你饿吗"+","+"我饿了";
// 相当于
let str1 = "你饿吗,我饿了";
console.log(str); // 你饿吗,我饿了

模板字符串

模板字符串比传统的字符串更强大：
- 不用考虑引号嵌套问题，相同引号随便嵌套能够解析
- 可以解析HTML标签代码，能够解析回车换行，使代码更直观、便利
- 函数也可以使用模板字符串进行调用，参数需要使用插值表达式 ${}

模板字符的定义使用反引号即 ` ` 进行定义

let str = `as"d"fg"h"jkl`;
console.log(str); // as"d"fg"h"jkl

如果函数使用模板字符串进行调用，则在参数上会有些不同，只能够将${}里的内容作为参数，其他都作为字符。函数内第一个参数是一个数组，接收的是调用参数两边的字符，第二个参数是后面对应插值表达式内的参数。

// 函数正常传参调用
function fun(asg,meg){console.log(asg); // 钟情console.log(meg); // 中意
}
fun("钟情","中意");// 函数使用模板字符串传参调用
function funStr(asg,meg){console.log(asg); // ["钟情", "中意", raw: Array(2)]console.log(meg); // 你一人
}
funStr`钟情${"你一人"}中意`;

字符串方法

每一个定义的字符串都可以看作是一个对象，js为它们提供了许多内置属性与方法。

下面将列举es5及es6字符串常用的属性及方法：

length 获取字符个数

charAt() 通过索引获取字符

charcodeAt() 获取字符的Ascii码

slice() 从x索引位置截取字符...截取到y位置前

subString() 从x索引位置截取字符...截取到y位置前

subStr() 从x索引位置截取字符...截取y个字符个数

concat() 把新的字符串拼接到原字符串后面

indexOf() 获取字符串中某个字符的索引...只有第一个

lastindexOf() 获取字符串中某个字符的索引...只有最后一个

search() 获取字符串中某个字符的索引...只有第一个

replace() 替换字符

split(用于分割的字符) 分割字符串，接收为数组

trim() 去除字符串前后空格

touppercase() 全部转换为大写

Tolowercase() 全部转换为小写

fromCharcode() 传入的Ascii码转换为字符

includes() 检测某个字符串是否存在字符中,返回 true/false

startsWith() 检测字符串是否以指定字符开头,返回 true/false

endsWith() 检测字符串是否以指定字符结束,返回 true/false

trimStart() 去掉字符前面空格

trimEnd() 去掉字符后面空格

Repeat(数字) 重复出现次数(不能为负数和infinity)

padStart(改变的字符个数,添加的值) 在前面添加

padEnd(改变的字符数,个添加的值) 在后面添加

at() 查找指定下标的字符加入了负数可以倒数查找

For...of 遍历字符串

String.raw() 返回一个斜杠都被转义（即斜杠前面再加一个斜杠）

的字符串往往用于模板字符串的处理方法

es5中的属性及方法使用

//String对象的属性及方法
var str = "abcdefgabcdefgabcdefg";
//属性
//1.length属性 --- 获取字符串的长度
console.log(str.length); // 21//方法
//1.charAt(索引) --- 获取该索引(下标)位置上的字符
console.log(str.charAt(3));     //d//2.charCodeAt(索引) --- 获取指定位置上的字符的ASCII码
console.log(str.charCodeAt(3));     //100//3.concat("字符串1","字符串2",....) --- 拼接字符串,将传入的参数拼接到原字符串的后面
console.log(str.concat("lala","hehe","不知道")); // abcdefgabcdefgabcdefglalahehe不知道//4.slice(开始下标，结束下标) --- 截取字符串，从开始下标截取到结束下标的前一位
console.log(str.slice(2,6)); // cdef
console.log(str.slice(2));  //cdefgabcdefgabcdefg //只写一个下标，意思就是从该下标开始，截取到字符串结束//5.substring(开始下标,结束下标) --- 截取字符串，从开始下标截取到结束下标的前一位
console.log(str.substring(2,6)); // cdef
console.log(str.substring(2));   // cdefgabcdefgabcdefg//只写一个下标，意思就是从该下标开始，截取到字符串结束//6.substr(开始下标，截取的字符的个数) --- 截取字符串
console.log(str.substr(2,10));  // cdefgabcde
console.log(str.substr(2));     // cdefgabcdefgabcdefg//只写一个下标，意思就是从该下标开始，截取到字符串结束//7.indexOf("要查询的字符") --- 返回指定字符在原字符串中的下标,但是只能返回第一次出现的位置
console.log(str.indexOf("c"));  // 2
console.log(str.indexOf("w"));    // -1//如果字符没有在原字符串中找到，返回-1//8.lastIndexOf("要查询的字符") --- 从后往前去找，依然是返回第一次出现的位置
console.log(str.lastIndexOf("c"));    //16
console.log(str.lastIndexOf("w"));    // -1//如果字符没有在原字符串中找到，返回-1//9.trim() --- 去除字符串前后的空格，不能去除字符串中间的空格
var str1 = "      dhsakd    dhsakdhkjsa        ";
console.log(str1);        //      dhsakd    dhsakdhkjsa
console.log(str1.trim()); // dhsakd    dhsakdhkjsa//10.toUpperCase() --- 全部转换为大写
var str2 = "dhsajdHKHKJHhjhjh";
console.log(str2.toUpperCase()); // DHSAJDHKHKJHHJHJH//11.toLowerCase() --- 全部转换为小写
console.log(str2.toLowerCase()); // dhsajdhkhkjhhjhjh//12.search("要查找的字符") --- 返回指定字符在原字符串中的下标,但是只能返回第一次出现的位置
console.log(str.search("f"));  // 5//与indexOf用法一致//13.replace("要被替换掉的字符串","新字符串") --- 替换字符串
console.log(str.replace("c","9"));  // ab9defgabcdefgabcdefg//只能替换第一个出现的字符//14.split("要进行分割的字符串") --- 分割字符串，返回一个分割之后的字符串数组
console.log(str.split("c"));      // ["ab", "defgab", "defgab", "defg"]
console.log(str.split("c",2));        // ["ab", "defgab"]//第二位数代表留几段字符串//15.fromCharCode() --- 返回传入的ASCII码值所对应的字符
console.log(String.fromCharCode(101,102,103)); // efg
console.log(String.fromCharCode(1,2,3));       //

es6中字符串的属性及方法使用

let str = "asdfghjkl";// 1-includes() -- 检测某个字符串是否存在字符中,返回true/false
console.log(str.includes(NaN)); // false// 2-startsWith() -- 检测字符串是否以指定字符开头
console.log(str.startsWith("asdfgh")); // true// 3-endsWith() -- 检测字符串是否以指定字符结束
console.log(str.endsWith("jkl")); // truelet str1 = " asdfghjkl "; // 4-trim() -- 去掉字符两侧空格
console.log(str1.trim()); //asdfghjkl// 5-trimStart() -- 去掉字符前面空格
console.log(str1.trimStart()); //asdfghjkl// 6-trimEnd() -- 去掉字符后面空格
console.log(str1.trimEnd()); // asdfghjkl///
let num4 = "ab";// 7-repeat -- 重复出现次数
console.log(num4.repeat(10)); // abababababababababab// 8-padStart(改变的字符个数,添加的值) -- 在前面添加
console.log(num4.padStart(5,"ab")); // abaab// 9-padEnd(改变的字符个数,添加的值) -- 在后面添加
console.log(num4.padEnd(5,"dg")); // abdgd// 10-at()查找指定下标的字符 -- 加入了负数可以倒数查找
console.log(num4.at(-2)); // a// 11-String.raw() -- 返回一个斜杠都被转义（即斜杠前面再加一个斜杠）的字符串//往往用于模板字符串的处理方法
console.log(String.raw`nihao\${2+3}`); // nihao\${2+3}
console.log(String.raw({ raw: ['foo', 'bar'] }, 1 + 2)); // foo3bar

希望能够有所帮助！