一、字符串概述
定义： 用单引号或双引号包裹起来的，零个或者多个排列在一起的字符
嵌套： 字符串可以嵌套
字符串注意事项：
- 在单引号包裹的字符串内部，应该使用双引号进行嵌套。
- 在双引号包裹的字符串内部，应该使用单引号进行嵌套。
- 如果非要在字符串中使用相同的标识，就需要使用转义字符。
- 字符串一般建议写在一行，不能分成多行。
- 如果必须分成多行，可以采用反斜杠（\）作为连接符。
- 也可以使用【(+)连接运算符】来连接多个字符串，模拟多行字符串。
<script>
console.log('hello' +
' world !' +
'goodbye' +
' sxt' + 'my name is "Zhangsan"');
</script>
1.1 length属性
-
描述：length属性–返回一个数字类型的字符串长度，也就是字符串包含的字符个数
-
语法：字符串变量.length
<script>
var str = 'hello world_#';
var str1 = '小张';
var result = str.length;
var result1 = str1.length;
console.log(result); // 13
console.log(typeof result); // number
console.log(result1); // 23
console.log(typeof result1); // number
</script>
1.2 []字符索引
- 描述：根据指定的下标获取字符串中的字符
- 语法：字符串变量[索引]
说明：
- 索引一次只能索引一个字符，如果需要多个则需要使用 + 连接符
- 索引从0开始，0表示第一个字符
<script>
var str = 'xiaoMingTongXue';
var resultStr = "";
for (var i = 4; i < 8; i++) {
resultStr += str[i];
}
console.log(resultStr);// Ming
</script>
1.3 charAt()
- 描述:根据指定的索引返回具体的字符
- 语法：字符串变量.charAt();
<script>
var str = 'hello world';
var result = str.charAt(1);
document.write(result); // e
</script>
1.4 charCodeAt()
- 描述：charCodeAt返回的是字符对应的Unicode编码
- 若是返回的字符串中没有对应的字符，那么则返回NaN
<script>
var str = 'Frankenstein';
var result = str.charCodeAt(3);
var result1 = str.charCodeAt(23);
console.log(result); // 110
console.log(result1); // NaN
</script>
1.5 concat()
- 描述：能够将多个字符串拼接起来，合成一个新的字符串。
- 语法：字符串变量1.concat(字符串变量2，字符串变量3，…)
<script>
var str1 = 'hello,';
var str2 = 'world.';
var str3 = 'I\'m';
var str4 = 'come.';
var result = str1.concat(str2, str3, str4);
console.log(result); // hello,world.I'mcome.
</script>
1.6 indexOf()
- 描述：返回一个字符串在另一个字符串首次出现位置的 索引
- 语法：字符串变量.indexOf()
<script>
//需求：要求替换字符串中第一次出现的sxt，替换成xxx
var str = 'hello sxt! gongbye sxt';
var result = str.indexOf('sxt');
console.log(result); //6
var before = str.substring(0, result);
console.log(before); // hello
var after = str.substring(result + 3);
console.log(after); // ! gongbye sxt
var newStr = before.concat('xxx', after);
console.log(newStr); //hello xxx! gongbye sxt
</script>
注意： indexOf()还能接受第二个参数，表示从这个位置开始向后匹配
<script>
var string = 'xiaoMingTongXue';
var str1 = string.indexOf('i', 3); //M
console.log(str1); // 5
</script>
1.7 lastIndexOf()
- 描述：返回一个字符串在另一个字符串最后出现位置的索引
- 字符串的查找是从源字符串末尾处向前进行查找。如果查找失败则返回-1.
- 切记，只是查找顺序是从后向前进行，并不是把字符串反过来找
注意： lastIndexOf()还能接受第二个参数，表示从这个位置开始向前匹配
<script>
var str = 'hello sxt! gongbye sxt';
var result = str.lastIndexOf('sxt');
console.log(result); //19
var string = 'xiaoMingTongXue';
var str1 = string.indexOf('i', 3);
var str2 = string.lastIndexOf('i', 3);
console.log(str1); // 5
console.log(str2); // 1
</script>
1.8 replace()
- 描述：replace方法能够将【查找到的第一个指定字符串】替换成【目标字符串】。如果查找失败则不发生替换，而是将原字符串复制一份拷贝。
- 语法：str.replace(oldStr,newStr)
- 不会对原字符串产生任何影响，而是生成一个新的字符串
- replace只能改变第一个查找到的子字符串，如果想要改变多个，任然需要依赖于正则表达式
<script>
var str = 'hello sxt! gongbye sxt';
var newStr = str.replace('sxt', 'xxx');
console.log(newStr); //hello xxx! gongbye sxt
console.log(str); //hello sxt! gongbye sxt
//需求2：替换字符串中所有的sxt，替换成xxx
var str = 'hello sxt! gongbye sxt';
while (str.indexOf('sxt') != -1) {
str = str.replace('sxt', 'xxx');
}
console.log(str); //hello xxx! gongbye xxx
</script>
1.9 split()
- 描述：根据指定的符号对字符串进行分割，分割后的每一个子元素整合成一个数组返回。
- 如果无法分割，那么返回的数组只有一个元素，这个元素就是字符串本身
- 语法：str.split(symbol)
- 分割的符号不同那么得到的结果也不同
- 如果分隔符是空字符，那么会把整个字符串逐个切开
<script>
var str = 'hello sxt !goodbye sxt';
console.log(str.split("")); // (22) ["h", "e", "l", "l", "o", " ", "s", "x", "t", " ", "!", "g", "o", "o", "d", "b", "y", "e", " ", "s", "x", "t"]
console.log(str.split(' ')); // (4) ["hello", "sxt", "!goodbye", "sxt"]
</script>
1.10 trim()
- 描述：trim()方法的作用是能够去掉字符串两端多余的空格。
- 语法：str.trim()
- trim()方法并不会对原本字符串产生任何影响，而是会生成一个新的字符串
<script>
var str = ' hello world sxt ';
var newStr = str.trim();
console.log(newStr); //hello world sxt
console.log(str); // hello world sxt
</script>
1.11 toUpperCase()、toLowerCase()
- 描述：toUpperCase方法能够把字符串中的英文字母全都转换成大写字母。
- 描述：toLowerCase方法能够把字符串中的英文字母全都转换成小写字母。
- 语法：str.toUpperCase()或str.toLowerCase()
<script>
var str = "heHELLO WORLD";
var newStr = str.toUpperCase();
var newStr1 = str.toLowerCase();
console.log(newStr); //HEHELLO WORLD
console.log(newStr1); //hehello world
</script>
1.12 localeCompare()–不常用)
- 描述：如果 stringObject 小于 target，则 localeCompare() 返回小于 0 的数。如果 stringObject 大于 target，则该方法返回大于 0 的数。如果两个字符串相等，或根据本地排序规则没有区别，该方法返回 0。
- 语法：stringObject.localeCompare(target)
<script>
var str1 = 'd';
var str2 = 'A';
var result = str1.localeCompare(str2);
console.log(result); //1
</script>
1.13 match()
- 描述：返回该字符串在另一个字符串中首次出现的信息
- 如果没有找到则返回null
<script>
var str = 'hello sxt !goodbye sxt';
var newStr = str.match('sxt');
console.log(newStr); //["sxt", index: 6, input: "hello sxt !goodbye sxt", groups: undefined]
</script>
1.14 search()
- 和match()方法相似，都是查找子字符串在指定字符串中的位置。
- search()返回结果为下标，如果未匹配到则返回-1
语法：str.search(‘xxx’)
var str = 'hello world hello';
console.log(str.search('hello'));//0
1.15 startWith()
判断是否是指定字符串开头
let str = "http://www.it666.com";
let result = str.startsWith("www");
console.log(result);
1.16 endWith()
判断是否以指定字符串结尾
let str = "http://www.it666.com";
let result = str.endWith("www");
console.log(result);
二、字符串对象和字符串截取方法
2.1 字符串对象
- 描述：通过new关键字创建对象
- 语法： var strObj=new String(“字符串内容”);
注意：
- 通过new关键子创建的字符串对象类型已经不是String类型，而是Object类型
<script>
var str1 = 'hello';
console.log(str1); //hello
console.log(typeof str1); //string
var strObj = new String('hello');
console.log(strObj); // String {"hello"}
console.log(typeof strObj); //object
</script>
2.2 字符串截取方法
2.2.1 subString()
- 描述：表示从fromIndex位置处开始截取，到toIndex位置结束之间的字符串，不包含第二个参数的字符
- 语法：str.subString(fromIndex,toIndex);
注意：
- 本方法两个参数能互换位置
- 第一个参数表示字符串的开始位置，第二个参数表示字符串的结束位置
- 结束位置理论上应该大于开始位置
- 如出现第一个参数大于第二个参数的情况，subString()会自动变更两个参数的位置
<script>
var str = 'The Three FireGuners';
var result = str.substring(4, 9);
var result1 = str.substring(9, 4);
console.log(result); // Three
console.log(result1); // Three
</script>
2.2.2 substr(x,y)
- 描述：表示从第一下标开始截取，截取参数二的长度内容
<script>
var str = 'The Three FireGuners';
var result = str.substr(9, 4);
console.log(result); // Fir
console.log(result.length); // 4
</script>
2.2.3 slice(x,y)
- 描述：表示从第一下标开始截取，到参数二的下标为止，不包含第二个参数的字符
注意：：
- 本方法两个参数不能互换位置
- 如果第一个参数大于第二个参数，则返回空串
<script>
var str = 'The Three FireGuners';
var result1 = str.slice(4, 9);
var result = str.slice(6, 4);
var result2 = str.slice(-4, -1);
var result3 = str.slice(-1, -4);
console.log(result1); // Three
console.log(result);
console.log(typeof result); //string
console.log(result.length); // 0
console.log(result2); //ner
console.log(result3);
</script>
注意： 以上三个方法中第二个参数都可以省略不写，如果省略不写，那么则表示从第几个开始一直截取到字符串的末尾
三、转换为字符串类型
1.将Number类型转换为字符串类型
2.将Boolean类型转换为字符串类型
3.将undefined类型转换为字符串类型
4.将null类型转换为字符串类型
在JavaScript中如果想将以上的四种基本数据类型转换为字符串类型, 常用的方法有三种：
3.1 .toString()
对于Number类型和Boolean类型来说, 可以通过 变量名称.toString()的方式来转换
变量名称.toString()的方式前面不能是常量, 因为常量不能被改变；String(常量or变量), 因为是根据传入的值重新生成一个新的值, 并不是修改原有的值
let value = 123;
console.log(value); // 在谷歌浏览器的控制台中如果是Number类型是蓝色的
console.log(typeof value);//number
// 以下代码的含义: 将value变量中存储的数据拷贝一份, 然后将拷贝的数据转换为字符串之后返回
let str = value.toString();
console.log(str); // 在谷歌浏览器的控制台中如果是String类型是灰色的
console.log(typeof str);//string
// 注意点: 变量名称.toString是对拷贝的数据进行转换, 所以不会影响到原有的数据
console.log(value);//123
console.log(typeof value);//number
// 注意点: 不能使用常量直接调用toString方法, 因为常量是不能改变的
// let str2 = 123.toString();
3.2 String()
可以通过String(常量or变量);转换为字符串；是根据传入的值重新生成一个新的值, 并不是修改原有的值
let value1 = undefined;
let str1 = value1.toString();
let value2 = null;
let str2 = value2.toString();
let value = undefined;
console.log(value);
console.log(typeof value);
// 以下代码的含义: 根据传入的数据重新生成一个新的字符串
let str = String(value);
console.log(str);
console.log(typeof str);
let value1 = null;
console.log(value1);
console.log(typeof value1);
let str1 = String(value1);
console.log(str1);
console.log(typeof str1);
let value2 = 123;
console.log(value2);
console.log(typeof value2);
let str2 = String(value2);
console.log(str2);
console.log(typeof str2);
3.3 通过 + “”/‘’
可以通过 变量or常量 + “” / 变量or常量 + '‘转换为字符串；+’'或者+""底层的本质其实就是调用String()函数
let value = 123;
// let str = value + '';
let str = value + "";
console.log(str);
console.log(typeof str);
四、转换为number类型
将String类型转换为数值类型
将Boolean类型转换为数值类型
将undefined类型转换为数值类型
将null类型转换为数值类型
在JavaScript中如果想将以上的四种基本数据类型转换为数值类型, 常用的方法有三种
1.通过Number(常量or变量);方式来转换；会根据传入的值生成一个新的数据
2.还可以通过数学运算中的+号和-号来转换
3.还可以通过parseInt(需要转换的字符串)/parseFloat(需要转换的字符串)
4.1 将String类型转换为数值类型
- 如果字符串中都是数值, 那么就正常转换
- 如果字符串是一个空串"“/” ", 那么转换之后是0
- 如果字符串中不仅仅是数字, 那么转换之后是NaN
let str = "123";
console.log(str);
console.log(typeof str);
let num = Number(str);
console.log(num);
console.log(typeof num);
let num1 = Number("456");
console.log(num1);
console.log(typeof num1);
注意点: 如果字符串中没有数据, 那么转换的结果是0
// let str = "";
let str = " ";
let num = Number(str);
console.log(num);
console.log(typeof num);
注意点: 如果字符串中的数据不仅仅是数值, 那么转换的结果是NaN
// NaN === Not a Number
let str = "12px";
let num = Number(str);
console.log(num);
console.log(typeof num);
4.2 将 Boolean 转换为数值类型
如果是布尔类型的true, 那么转换之后的结果是1
如果是布尔类型的false, 那么转换之后的结果是0
let flag = true;
let num1 = Number(flag);
console.log(num1);
console.log(typeof num1);
let flag1 = false;
let num2 = Number(flag1);
console.log(num2);
console.log(typeof num2);
4.3 将 null 类型转换为数值类型
如果是空类型, 那么转换之后的结果是0
let value = null;
let num = Number(value);
console.log(num);
console.log(typeof num);
4.4 将 undefined 类型转换为数值类型
如果是未定义类型, 那么转换之后的结果是NaN
let value = undefined;
let num = Number(value);
console.log(num);
console.log(typeof num);
4.5 通过+/- 进行转换
虽然通过+/-都可以将其它类型转换为数值类型, 但是-会改变数值的正负性
+/-底层本质上就是调用了Number函数
let str = "123";
// let num = +str;
// let num = -str;
// let num = +"456";
// let num = +"";
// let num = +" ";
let num = +"12px";
console.log(num);
console.log(typeof num);
4.6 通过 parseInt/parseFloat 进行转换
注意点: parseInt/parseFloat都会从左至右的提取数值, 一旦遇到非数值就会立即停止
停止的时候如何还没有提取到数值, 那么就返回NaN
let str = "a3.14px";
let num = parseFloat(str);
console.log(num);
console.log(typeof num);
注意点: parseInt/parseFloat都会将传入的数据当做字符串来处理
五、转换为布尔类型
将String类型转换为布尔类型：只要字符串中有内容都会转换为true, 只有字符串中没有内容才会转换为false
将Number类型转换为布尔类型：只有数值是0才会转换为false, 其它的都会转换为true，如果是NaN也会转换为false
将undefined类型转换为布尔类型： undefined会转换为false
将null类型转换为布尔类型：null会转换为false
空字符串/0/NaN/undefined/null 会转换成false, 其它的都是true
5.1 将基本数据类型转换为布尔类型
只需调用Boolean(常量or变量)
// let str = "abc"; // true
// let str = " "; // true
let str = ""; // false
let flag = Boolean(str);
console.log(flag);
console.log(typeof flag);
5.2
在JavaScript中NaN属于Number类型
let num = NaN;
console.log(typeof num);
let flag = Boolean(num);
console.log(flag);
console.log(typeof flag);
六、javascript字符集
解析非中文代码:
- btoa()：字符串或二进制值转为Base64编码
- atob()：Base64编码转为原来的编码
加密解密中文文字:
- encodeURIComponent()(加密)
- decodeURIComponent()(解密)
案例：
<script>
var str = "范冰冰:I LOVE YOU ";
var newStr = encodeURIComponent(str);
var toStr = btoa(newStr);
console.log(toStr); // JUU4JThDJTgzJUU1JTg2JUIwJUU1JTg2JUIwJTNBSSUyMExPVkUlMjBZT1UlMjA=
var newStr = btoa(str);
var toStr = atob(newStr);
var str = 'JUU4JThDJTgzJUU1JTg2JUIwJUU1JTg2JUIwJTNBSSUyMExPVkUlMjBZT1UlMjA=';
var newStr = atob(str);
var toStr = decodeURIComponent(newStr);
console.log(toStr); //范冰冰:I LOVE YOU
</script>
五、转义字符 /
- 作用：将特殊字符转换为字符串字符。
- 可用于定义撇号、换行、引号等其他特殊字符。
<script>
console.log('张三说：\’您好\‘');
var str = 'D:/web前端技术/';
console.log(str);
alert('hello\r world');
</script>
5.1 常见的转义字符
1559
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
