第十节: JavaScript 字符串常用方法

1. 字符串基本知识

1.1 字符串

字符串就是我们平时说的话,字符串由一对单引号或双引号组成.

1.2 字符串创建

字面量创建方式:

var str = "365天说爱你们";

字符串就是特殊的数组,因为都具有length属性,既然和数组很相似,就可以像数组一样使用下标来获取字符

console.log(str[0])

2. 字符串属性

字符串自带的length属性

属性length就是字符串的长度

var str = "365天说爱你";
console.log(str.length);  //7

中文、数字、英语字母、空格，都是1个长度,字符串的长度从0开始;

3.常见的方法

一. 以下是查询字符,字符编码转换的方法:

2.1 charAt() 返回在指定位置的字符

使用方法:

str.charAt(index);

str: 是字符串

charAt(); 是方法

index: 字符串的索引

整体返回:

返回查找到的字符

括号中传入字符的下标(索引),从0开始

var str = 'abcdefg';
console.log(str.charAt(1));   //b

和数组下标类似的。

var str = "abcdefg"
for(var i = 0 ; i < str.length ; i++){
    console.log(str.charAt(i));
}

这种获取字符和下标获取的区别在哪里

1. charAt() 当参数索引不在字符串中是,返回空字符串
2. 中括号[] 当中括号内的索引不在字符串中时,返回undefined,因为获取一个对象身上不具有的属性时返回undefined,中括号就是对象表示法

console.log(str.charAt(10));   // ""
console.log(str[10]);          // undefined

2.2 charCodeAt() 获取字符串中对应索引的字符编码

使用方法:

str.charCodeAt(index);

和charAt() 一样

整体返回:

返回charAt()方法查询到字符的编码

常识记忆的编码

0-9 ===> 48-57

A-Z ===> 65-90

a-z ===> 97-122

var str = "wuwei";
console.log(str.charCodeAt(0))

2.3 formCharCode() 获取对应字符编码的字符

使用语法:

String.fromCharCode(字符编码);

整体返回:

字符编码对应的字符

var str = String.fromCharCode(97)
console.log(str)

2.4 通过字符串查询索引

indexOf和lastIndexOf()

第一个参数是需要查询的字符串

第二个参数是开始查询的索引

1. indexOf() 检查参数字符在字符串中的索引(下标)

   字符串按从左到右查找参数字符串,查询到返回索引,查询不到返回-1

   var str = 'wuweiiewuw';
   console.log(str.indexOf("e"));     //3
   
   // indexOf第二个参数是开始查询的索引
   var str = 'wuweiiewuw';
   console.log(str.indexOf("e",4));     //6
   

2. lastIndexOf() 逆向获取字符在字符串中的位置

   字符串按从右到左查找参数字符串,查询到返回索引,查询不到返回-1

   var str = 'wuweiiewuw';
   console.log(str.lastIndexOf("e"));     //6
   
   // indexOf第二个参数是开始查询的索引
   var str = 'wuweiiewuw';
   console.log(str.lastIndexOf("e",4));   //3
   

3. search() 获取字符在字符串中的位置

   和indexOf结果一样

   var str = 'wuweiiewuw';
   console.log(str.search("e"));   //3
   
   // 没有第二个参数
   

不同

1. [], charAt() 是通过索引获取字符
2. indexOf(), lastIndexOf() 是通过字符获取索引

二. 以下是字符串截取的方法

2.5 substr() 截取字符串

substr()方法传入两个参数,第一个参数是开始截取的下标,第二次参数是截取的数量

使用语法:

str.substr(start[,num]);

start: 从第几个字符开始截取,为字符索引(可以为负数)

num: 是截取的个数,可以省略,如果省略表示从第一个参数开始截取剩下所有的参数

整体返回:

返回截取的字符

是否改变原字符串:

不改变原字符串

var str = 'abcdefgh';
console.log(str.substr(2,5));
// cdefg  从下标为2的地方开始，截取5个字符
console.log(str.substr(2));
// cdefgh 从下标为2的地方开始，截取剩余所有字符

2.6 substring() 截取字符串

substring()方法传入两个参数,第一个参数是开始截取的索引,第二个参数是截取结束的索引,包含开始字符,不包含结束字符

使用语法:

str.substr(start[,end]);

start: 从第几个字符开始截取,为字符索引,(如果为负数,截取全部字符)

end: 是截取结束字符的索引,截取的字符串不包含end索引对应的字符,可以理解截取了(end- start)个字符,

可以省略,如果省略表示从第一个参数开始截取剩下所有的参数

整体返回:

返回截取的字符

是否改变原字符串:

不改变原字符串

var str = 'abcdefgh';
console.log(str.substring(2,5))
// cde

2.7 slice() 截取

使用语法:

str.substr(start[,end]);

start: 从第几个字符开始截取,为字符索引,(如果为负数,截取全部字符)

end: 是截取结束字符的索引,截取的字符串不包含end索引对应的字符,可以理解截取了(end- start)个字符,

可以省略,如果省略表示从第一个参数开始截取剩下所有的参数

整体返回:

返回截取的字符

是否改变原字符串:

不改变原字符串

var str = '365天说爱你们';
console.log(str.slice(-3,-1))
//爱你 

从下标为-3的位置开始截取,截取到下标为-1的位置,包含-3位置的字符,但不包含-1位置的字符

substring和slice的区别

slice支持负数索引
str.slice(-2,-1) ==> 从索引-2开始，截取-1-(-2)个字符

三. 以下是字符串拼接,替换,切割方法:

2.8 concat() 拼接字符串

作用：实现字符串的拼接

使用语法:

str1.concat(str2);

将str2,str1进行拼接,

整体返回:

返回拼接后的新字符串

是否改变原字符串:

不改变原字符串

var str = "你们好!";
str.concat("小可爱们")
// "你们好!小可爱们"

2.9 replace() 替换字符串

使用语法:

str.replace(str1,str2);

首先会在String中查找到str1子串,然后用str2,替换str1子串;

如果在String中查不到子串str1,那就直接返回String

只会替换从左向右第一次查询成功的字符

整体返回:

返回替换后的新字符串

是否改变原字符串:

不改变原字符串

var str = '365天说爱你们';
console.log(str.replace("爱","喜欢"))
//365天说喜欢你们

2.10 split() 切割 ,把字符串切割为数组,

作用：用指定字符串把str分割成数组 和数组join方法对应

使用语法:

str.split(str2);

str2: 将str按照str2字符切割成数组

整体返回:

返回切割后的数组;

是否改变原字符串:

不改变原字符串

按照split()里面传入参数进行切割

var str = "我爱你们,亲爱的祖国的人民币";
console.log(str.split("的"));
//["我爱你们,亲爱", "祖国", "人民币"]

如果不传入参数,将整体切割为数组的一项

console.log(str.split());
//["我爱你们,亲爱的祖国的人民币"]

如果传入一个空字符串,则按字符切割

console.log(str.split(""));
["我", "爱", "你", "们", ",", "亲", "爱", "的", "祖", "国", "的", "人", "民", "币"]

四. 以下改变英文字符串的大小写:

2.11 toLowerCase(),toUpperCase()

toLowerCase(),将英文字符转成小写

toUpperCase(),将引文字符转成大写

1. 返回新字符串
2. 不改变原字符串

var str = "wuwei";
console.log(str.toUpperCase());

自己封装这连个方法

function myUpper(str){
    str = str || "";
    var newStr = "";
    for(var i = 0; i < str.length; i++){
        var charCode = str.charCodeAt(i);
        if(97 <= charCode  && charCode <=122 ){
            newStr += String.fromCharCode(charCode - 32);
        }else{
            newStr += str[i];
        }
    }
    return newStr;
}

五. 以下是字符其他方法:

str.trimLeft() ==> 去除字符串开始的空格
str.trimRight() ==> 去除字符串结束的空格
str.trim() ==> 去除字符串开始和结束的空格

var str = "   wuwei   wuwei  "
str.trimLeft();

封装方法去除所有空格

var str = "   wuwei   wuwei  "
function myTrim(str){
   for(var i = str.length - 1; i >=0; i--){
        if(str[i] == " "){
            str = str.replace(str[i],"");
        }
    } 
    return str;
}
myTrim(str);

function myTrim(str){
    str = str || "";
    var arr = str.split("");
    var newStr = "";
   for(var i = 0; i < arr.length; i++){
        if(arr[i] != " "){
            newStr += arr[i]
        }
    } 
    return newStr;
}