027-Web前端-JS-字符串

#6.10 加长版 ^u^

1.字符串概述   2.字符串长度  3.转义字符  4.字符串对象  5.字符串方法

---

1.字符串概述

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

字符串注意事项：

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

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

    3.如果非要在字符串中使用相同的标识，就需要使用转义字符。

    4.字符串一般建议写在一行，不能分成多行。

        a.如果必须分成多行，可以采用反斜杠\作为连接符

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

---

2.字符串长度

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

//后面节【5.】还会总结一遍

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

b.字符索引：[]方法

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

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

---

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

描述：length属性能够返回一个数字类型的字符串长度，也就是字符串包含的字符个数

语法：字符串变量.length

 

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

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

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

---

b.字符索引：[ ]方法

 

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

 

描述：根据指定的下标获取字符串中的字符

语法：字符串变量[索引]

 

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

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

---

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

 

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

charAt返回的是具体的字符 //与索引一样

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

 

var name = “Frankenstein”；

var at = name.charAt(0); //F

var codeAt = name.charCodeAt(0);//70

 

charAt()

   描述:根据指定的索引返回具体的字符

   语法：字符串变量.charAt();

charCodeAt()

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

语法：字符串变量.charCodeAt();

 

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

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

---

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

 

描述：能够将多个字符串拼接起来，合成一个新的字符串。

语法：字符串变量1.concat(字符串变量2，字符串变量3，...)

<script>

var speakWord1 = "come on！Please！";

var speakWord2 = “cute girl！";

var finalWord = speakWord1.concat(speakWord2);

console.log(finalWord);

</script>

 

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

---

3.转义字符

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

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

 

常见转义字符有：

\' 单引号

\" 双引号

\\ 反斜杠

\n 换行

\r 回车

\t  tab (制表符)

\b 退格符

\f 换页符

 

\n \r <br />区别

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

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

<br />是浏览器换行

//现在的回车已经是既回车又换行了。

 

总结：\r\n表示源代码换行。 <br/>表示浏览器文字换行

---

4.字符串对象

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

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

---

描述：通过new关键字创建对象

语法：var strObj=new String(“字符串内容");  //String必须大写，是既定的一个类

注意：

    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);

---

 substr()

   描述：表示从第一下标开始截取，截取参数二的长度内容

     var str = 'The Three FireGuners';

     var result=str.substr(9,4);

     console.log(result);

     console.log(result.length);

---

slice()

描述：表示从第一下标开始截取，到参数二的下标为止，不包含第二个参数的字符

注意：本方法两个参数不能互换位置

var str = 'The Three FireGuners';

// var result=str.slice(4,9);

var result=str.slice(6,4);

console.log(typeof  result);

console.log(  result.length);

 

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

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

 

var x = "John";              

var y = new String("John");

(x === y) // 结果为 false，因为是字符串，y 是对象              

//这两个方法后面还有

---

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:字符串切割，返回数组        

---

(1).length：测量字符串长度

描述：length属性能够返回一个数字类型的字符串长度，也就是字符串包含的字符个数

语法：字符串变量.length

 

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

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

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

---

(2).[ ]：字符索引

 

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

 

描述：根据指定的下标获取字符串中的字符

语法：字符串变量[索引]

 

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

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

---

(3).charAt()charCodeAt()：获取指定位置字符

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

charAt返回的是具体的字符 //与索引一样

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

 

var name = “Frankenstein”；

var at = name.charAt(0); //F

var codeAt = name.charCodeAt(0);//70

 

charAt()

   描述:根据指定的索引返回具体的字符

   语法：字符串变量.charAt();

charCodeAt()

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

语法：字符串变量.charCodeAt();

 

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

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

---

(4).concat()：字符串连接

 

描述：能够将多个字符串拼接起来，合成一个新的字符串。

语法：字符串变量1.concat(字符串变量2，字符串变量3，...)

 

<script>

var speakWord1 = "come on！Please！";

var speakWord2 = “cute girl！";

var finalWord = speakWord1.concat(speakWord2);

console.log(finalWord);

</script>

 

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

---

(5).substring：截取字符串

 

  描述：表示从第一下标开始截取，到参数二的下标为止，不包含第二个参数的字符      //前包后不包

   语法：str.subString(fromIndex , toIndex);

   例子：

     var str = 'The Three FireGuners';

     //var result=str.substring(4,9);

     var result=str.substring(9,4);

     console.log(result);

 

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

ps：结束位置理论上应该大于开始位置。但如果出现第一个参数大于第二个参数的情况，substring方法会自动更换两个参数的位置。

---

(6).substr：截取字符串

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

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

  var str = 'The Three FireGuners';

  var result=str.substr(9,4);

 

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

---

(7).slice：截取字符串

描述：表示从第一下标开始截取，到参数二的下标为止，不包含第二个参数的字符

注意：本方法两个参数不能互换位置

var str = 'The Three FireGuners';

// var result=str.slice(4,9);

var result=str.slice(6,4);

console.log(typeof  result);

console.log(  result.length);

 

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

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

 

var string = 'The Three fireGuners';

string.slice(4, 9) // 'Three'

string.slice(9, 4) // ''

 

ps：slice作用也是截取字符串，但是slice的两个参数不能互换。如果开始位置大于结束位置，那么返回结果就是一个空字符串。

---

注意：

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

---

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

描述：返回一个字符串在另一个字符串首次出现位置的索引

语法：字符串变量.indexOf()

 

var string = 'xiaoMingTongXue';

string.indexOf('i') ;//1

 

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

---

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

描述：返回一个字符串在另一个字符串最后出现位置的索引

var str='hello sxt! gongbye sxt';

var result=str.lastIndexOf('sxt');

console.log(result);

 

语法：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 //位置说的仍然是0开始的那个序号

---

(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：方法调用后面的()不能省略，这表示调用了一个方法！

---

(12).toLowerCase：全体小写

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

 

语法：str.toLowerCase();

 

var string = 'I AM Grute！';

string.toLowerCase() ;//i am grute！

---

(13).localeCompare：按规则排序

localeCompare方法的作用是根据本地的排序规则来进行比较。//不稳定 只需了解

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

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

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

 

语法：str1.localeCompare(str2);

 

var str1 = 'f'; //d D就-1了 不稳定

var str2 = 'D';

str1.localeCompare(str2) ;//1

 

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

---

(14).match：匹配字符串返回详细信息

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

//相比于IndexOf有更多的返回信息。

描述：返回该字符串在另一个字符串中首次出现的信息

语法：str.match(substr);

 

var string = 'hello world hello！';

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

 

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

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

---

(15).search：匹配字符串返回下标

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

//要不是应用于正则表达式则与IndexOf一模一样

 

语法：str.search('subStr');

var string = 'hello world hello！';

string.search('hello') ;//0

---

(16).replace：替换字符串

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

语法：str.replace(oldStr,newStr)

 

var string = 'hello world!';

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

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

 

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

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

//全部替换：用到indexOf检查

var str='hello sxt! gongbye sxt';

while(str.indexOf('sxt')!=-1){

    str=str.replace('sxt','xxx'); //注意新str·新赋值 防止死循环（因为默认不会影响原字符串）

}

console.log(str);

---

(17).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编码转为原来的编码

解析非中文代码

btoa()：字符串或二进制值转为Base64编码

atob()：Base64编码转为原来的编码

加密解密中文文字

encodeURIComponent()(加密)

decodeURIComponent()(解密)

 

var string = 'frank';

console.log(btoa(string));//ZnJhbms=

var string = 'ZnJhbms=';

console.log(atob(string));//frank

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