JS_字符串讲解

1.字符串概述

定义：字符串就是用单引号或者双引号包裹起来的，零个或多个排列在一起的字符。

嵌套：字符串可以嵌套。

在单引号包裹的字符串内部，应该使用双引号进行嵌套。

在双引号包裹的字符串内部，应该使用单引号进行嵌套。

ps：总之字符串嵌套不能够出现容易引起混淆的使用方式。

pss：在json解析的时候字符串需要单引号，因此推荐在各种情况都使用单引号的方式来声明。

转义字符：用特殊的符号来替代在字符串当中，容易引起歧义的内容。

\’ 单引号

\” 双引号

在嵌套时提到，字符串的嵌套不能够写引起混淆的方式。如果非要在字符串中使用相同的标识，就需要使用转义字符。

'Did she say \’Hello\'?'    
"Did she say \"Hello\"?"
"Can U tell me your YinHangKa password?\nGun du zhi!!"

强调1：字符串需要在一行内定义，分成多行会报错。但是如果必须分成多行，则在每一行的末尾使用反斜杠\作为连接符。

"you 
	   are
	   so
	   cute!"//错误的写法

"you \
   are \
   so \
   cute!"//正确的写法

强调2：也可以使用【(+)连接运算符】来连接多个字符串，模拟多行字符串。

"you 
	   are
	   so
	   cute!"//错误的写法

'you'
+'are'
+'so'
+'cute!'//正确的写法

2.字符串长度

javascript字符串中提供了一系列的方法，来帮助我们更好的使用字符串。

a.测量字符串长度：length属性

b.字符索引：[]方法

c.获取指定位置字符：charAt()方法和charCodeAt()方法

d.字符串连接：concat()方法

a.测量字符串长度：length属性

<script>
	var txt1 = "Hello World!";
	document.write("<p>" + txt1.length + "</p>");//12
	var txt2 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	document.write("<p>" + txt2.length + "</p>");//26
</script>

ps:document.write()的作用是：能够在页面当中通过脚本的方式编写html样式的代码。

pss:这只是一种写法，在现在阶段和console.log效果没差别。

psss:length属性是字符串经常会用到的，必须掌握！

b.字符索引：[ ]方法

[ ]方法：在字符串后面接中括号，中括号中写数字。能够访问到字符串中的每个字符。

var name = "Frankenstein";	
var firstCharacter = name[0];	
document.write("<p>"+firstCharacter +"</p>");

ps:索引一次只能索引一个字符，如果需要多个则需要用+连接符。

pss:索引从0开始，0表示第一个字符。

c.获取指定位置字符：charAt()方法和charCodeAt()方法

charAt()和charCodeAt()方法均表示获取指定位置的字符。不同的是：

charAt返回的是具体的字符

charCodeAt返回的是字符对应的Unicode编码

var name = “Frankenstein”；
var at = name.charAt(0);
var codeAt = name.charCodeAt(0);

结果显而易见：
F
70

ps：字符编码需要记得的两个。A—65，a—97。其他符号累加即可。

pss：如果 index 是负数，或大于等于字符串的长度，则 charCodeAt() 返回 NaN。

d.字符串连接：concat()方法

concat()方法能够将两个字符串拼接起来，合成一个新的字符串。

<script>
	var speakWord1 = "come on！Please！";
	var speakWord2 = “cute girl！";
	var finalWord = speakWord1.concat(speakWord2);
	console.log(finalWord);
</script>

可以认为concat和+作用相同。至少在现阶段我们可以认为他们是没有区别的。

3.转义字符

在 JavaScript 中，字符串写在单引号或双引号中。正因为这样，以下字符串无法解析：

原因：字符串 "We are the so-called " 被截断。

如何解决以上的问题呢？可以使用反斜杠 () 来转义 “Vikings” 字符串中的双引号，如下:

定义：反斜杠被叫做转义字符。

作用：转义字符能够将特殊字符转换为字符串字符。转义字符 () 可以用于转义撇号，换行，引号，等其他特殊字符。

常见转义字符有：

’ 单引号

" 双引号

\ 反斜杠

\n 换行

\r 回车

\t tab (制表符)

\b 退格符

\f 换页符

\n \r <br />

区别

\n

是换行，英文是New line，表示使光标下移一格

\r

是回车，英文是Carriage return，表示使光标到行首

<br />

是浏览器换行

我们在平时使用电脑时，已经习惯了回车和换行一次搞定，敲一个回车键，即是回车，又是换行。它是输出的HTML代码换行，客户看到的效果没有换行。

好比你在Webstorm里做一个网页，输入\r\n后，查看html源代码，就看会到有换行，而HTML解释器（浏览器）认为它是没用的东西，用不用都一样显示。

总结：

\r\n

表示源代码换行。

<br/>

表示浏览器文字换行

4.字符串对象

javascript中有字符串类型string类型，我们也知道这种基本类型的变量的创建方式。

但javascript中还提供了另外一种字符串的声明方式，这种方式叫字符串对象。使用 new 关键字将字符串定义为一个对象

语法：

var newString = new String(‘Frankenstein’);

var string1 = “frank";					//typeof返回 String 
var string2 = new String(“frank"); 	//typeof返回 Object

ps:不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：

pss:字符串和字符串对象是两个完全不同类型的数据，虽然效果相似，但是不能混为一谈！

var x = "John";            
var y = new String("John");
(x === y)		// 结果为 false，因为是字符串，y 是对象

注意：

1.通过new关键子创建的字符串对象类型已经不是String类型，而是Object类型

var str1='hello';
     console.log(str1);
     console.log(typeof str1);
     var strObj=new String('hello');
     console.log(strObj);
     console.log(typeof strObj);

5.字符串属性及方法

字符串中提供了一系列的方法帮助我们更好的使用字符串。

(1).length:返回字符串长度

(2).charAt（number）：返回当前指定位置的字符

(3).charCodeAt：

(4).concat:连接字符串

(5).substring:截取字符串

(6).substr:截取字符串（长度）

(7).slice:截取字符串。

(8).indexOf：返回当前查找字符串的位置，如果没有返回-1

(9).lastIndexOf:倒过来查找

(10).trim:去掉字符串两端的空格

(11).toUpperCase和toLowerCase:大小写转换

(12).localeCompare:比较两个字符串大小

(13).match:返回一个指定字符串的数组

(14).search:返回位置

(15).replace:替换字符串

(16).split:字符串切割，返回数组

(5).substring:截取字符串

作用是从num1位置开始截取，截止到num2位置结束之间的字符串。

语法：

str.substring(num1,num2);

var string = 'The Three FireGuners';
	string.substring(4, 9) // 'Three'
	string.substring(9, 4) // 'Three'

第一个参数表示子字符串的开始位置，第二个参数表示结束位置。

ps：结束位置理论上应该大于开始位置。

pss：如果出现第一个参数大于第二个参数的情况，substring方法会自动更换两个参数的位置。

(6).substr:截取字符串

作用是从num1位置开始截取，num2表示要截取的字符串长度。

语法：str.substr(num1,num2);

var string = 'The Three fireGuners';
	string.substr(4, 9) // 'Three fir'
	string.substr(9, 4) // ' fir'

ps：subStr方法虽然写法和subString很相似，但是表达的涵义以及用法却并不一样。substr方法两个参数不能够互换。

(7).slice:截取字符串

作用是从num1位置开始截取，num2表示截取结束的位置。

语法：

str.slice(num1,num2);

var string = 'The Three fireGuners';
	string.slice(4, 9) // 'Three'
	string.slice(9, 4) // ''

ps：slice作用也是截取字符串，但是slice的两个参数不能互换。

pss：如果开始位置大于结束位置，那么返回结果就是一个空字符串。

思考，如果开始位置是一个负数会发生什么？

注意：

substring、substr、slice三个方法第一个参数都表示字符串截取的开始位置。如果省略第二个参数，那么这三个方法都表示获取字符串本身一直到结束。

var string = 'The Three fireGuners';
	string.substring(0); 
	string.substr(0) ;
	string.slice(0);

显然，三个语句的结果都是The Three fireGuners。

(8).indexOf:查找一个字符串在另一个字符串的位置

语法：

str.indexOf(‘subStr’);

var string = 'xiaoMingTongXue';
	string.indexOf('i') ;//1

字符串的查找是从原字符串的开始处进行查找。如果查找失败则返回-1.

(9).lastIndexOf:查找一个字符串在另一个字符串的位置

语法：

str.lastIndexOf(‘subStr’);

var string = 'xiaoMingTongXue';
	string.lastIndexOf('i') ;//5

字符串的查找是从原字符串末尾处向前进行查找。如果查找失败则返回-1.

ps：只是查找顺序从末尾向前，并不是把字符串也反过来查找！！

var string = 'xiaoMingTongXue';
string.lastIndexOf('eu') ;//-1

注意：

indexOf和lastIndexOf还能接受第二个参数。

对于indexOf而言，表示从这个位置开始向后匹配。

而对于lastIndexOf而言，则表示从这个位置开始向前匹配。

str.indexOf(‘subStr’,num);
str.lastIndexOf(‘subStr’,num);

var string = 'xiaoMingTongXue';
	string.indexOf('i',3); //5
	string.lastIndexOf('i',3) ;//1

(10).trim方法

trim()方法的作用是能够去掉字符串两端多余的空格。

语法：

str.trim();

var string = '  China WanSui!  ';
	string.trim() ;//China WanSui!

ps：需要强调的是trim方法并不会对原本字符串产生任何影响，而是会生成一个新的字符串。

(11).toUpperCase方法

toUpperCase方法能够把字符串中的英文字母全都转换成大写字母。

语法：

str.toUpperCase();

var string = 'i am grute!';
	string.toUpperCase() ;//I AM GRUTE!

ps：方法调用后面的()不能省略，这表示调用了一个方法！

(11).toLowerCase方法

toLowerCase方法能够把字符串中的英文字母全都转换成小写字母。

语法：

str.toLowerCase();

var string = 'I AM Grute！';
	string.toLowerCase() ;//i am grute！

(12).localeCompare方法

localeCompare方法的作用是根据本地的排序规则来进行比较。

如果计算结果大于0则表示str1大于str2。

如果计算结果等于0则表示str1等于str2。如果计算结果小于0则表示str1小于str2。

语法：

str1.localeCompare(str2);

var str1 = 'f';
var str2 = 'D';
	str1.localeCompare(str2) ;//1

ps：ECMAscript 标准并没有规定如何进行本地特定的比较操作，它只规定该函数采用底层操作系统提供的排序规则。如果想要自定义比较方法也是可以的，但是我们在这里暂时不做考虑。有兴趣的可以自行查找。

(13).match方法

match方法的作用是查找原字符串是否匹配某个子字符串，返回结果是匹配的子字符串数组，如果没有找到则返回null。返回的数组内容为：寻找的子字符串，子字符串位置和原字符串。

语法：

str.match(substr);

var string = 'hello world hello！';
	string.match('hello') ;//['hello', index: 0, input: 'hello world hello！']

ps：需要注意的是match方法只能匹配到寻找到的第一个字符串。

pss：其实match方法还有另外一种正则表达式的写法，就是将substr字符串用正则表达式写。正则表达式的写法中能够找到所有匹配的字符串，但是这种写法我们暂时不做处理，等学习正则表达式之后再作考虑。感兴趣的自行查找。

(14).search方法

search方法和match相似，都是查找子字符串在指定字符串中的位置。不同的的返回结果为下标。如果没有找到匹配字串，则返回-1。

语法：

str.search('subStr');

var string = 'hello world hello！';
	string.search('hello') ;//0

(15).replace方法

replace方法能够将【查找到的第一个指定字符串】替换成【目标字符串】。如果查找失败则不发生替换，而是将原字符串复制一份拷贝。

语法：

str.replace(oldString,newString);

var string = 'hello world!';
var newString = string.replace('world','frank') ;//hello frank!
var stringCopy = string.replace('worlk','frank');//hello world!

ps：需要强调的是replace方法并不会对原本字符串产生任何影响，而是会生成一个新的字符串。

pss：replace只能改变第一个查找到的子字符串，如果想要改变多个，仍然需要依赖于正则表达式。

(16).split方法

split方法能够根据指定的符号将字符串进行分割，分割后的每一个子元素整合成一个数组返回。如果无法分割，那么返回的数组只有一个元素，这个元素就是字符串本身。

语法：

str.split(symbol);

var string = 'good bye everyone.';
	string.split(' ') ;//["good", "bye", "everyone"]

ps：split方法最后会返回一个数组。

pss：分割的符号不同，得到的结果也不同。

*javascript字符集

JavaScript使用Unicode字符集。也就是说，在JavaScript引擎内部，所有字符都用Unicode表示。

JavaScript不仅以Unicode储存字符，还允许直接在程序中使用Unicode编号表示字符，即将字符写成\uxxxx的形式，其中xxxx代表该字符的Unicode编码。

比如，\u00A9代表版权符号。解析代码的时候，JavaScript会自动识别一个字符是字面形式表示，还是Unicode形式表示。输出给用户的时候，所有字符都会转成字面形式。

var s = '\u00A9';
 console.log(s);//©
 		
\n 换行符	（\u000A）
\' 单引号	（\u0027）
\" 双引号	（\u0022）
\ 反斜杠	    （\u005C）

**字符串Base64编码

Base64本身是一种加密方式，可以将任意字符转成可打印字符。而我们使用这种编码方法，主要不是为了加密，而是为了不出现特殊字符，简化程序的处理。

javascript中字符串提供了两个有关Base64编码的方法：

btoa()：字符串或二进制值转为Base64编码
		atob()：Base64编码转为原来的编码
        
        var string = 'frank';
		console.log(btoa(string));//ZnJhbms=
		var string = 'ZnJhbms=';
		console.log(atob(string));//frank

ps:这两个方法不适合非ASCII码的字符，会报错。如果要把非ASCII码字符转为Base64编码，必须中间插入一个转码环节，再使用这两个方法。

JS_字符串讲解

1.字符串概述

2.字符串长度

3.转义字符

4.字符串对象

5.字符串属性及方法

*javascript字符集

**字符串Base64编码

继续阅读

主流浏览器四大综合性能测试

JavaScript自学笔记【4】函数的声明与调用目录二、函数的声明三、函数的调用

请求超时VUE axios重新再次请求

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

layui多任务上传添加进度条