JavaScript基础教程之字符串对象实例讲解

javascript基础教程之字符串对象实例讲解

1、内置对象简介
2、获取字符串长度
3、大小写转换
4、得到字符串中指定位置的某一字符
5、截取字符串
6、替换字符串
7、分割字符串
8、检索字符串的位置

正式开始：

一、内置对象简介

在javascript中，对象可以分为两种：

（1）内置对象；【已经定义好的对象，可以直接使用】

（2）自定义对象；【需要我们自己定义的对象】

一定要记住：

初学阶段，不必掌握自定义对象，先学好内置对象，等基础学完了，等到进阶的时候再去学习自定义对象。

常用的内置对象有四种：

（1）string：字符串对象
（2）array：数组对象
（3）date：日期对象
（4）math：数学对象

问：为什么要现学字符串对象呢？

答：因为字符串对象是内置对象中最基础的，后面学到的知识都会涉及到字符串对象的用法，毕竟语言都是环环相扣的，互相之间都是有关联的。比如说数组对象，这里就存在数组和字符串之间的相互转化问题，用于处理一些比较复杂的操作问题（学到后面自然就明白了）。而且只有在最开始掌握了字符串对象的用法，在后面其它内置对象的学习中才会更加顺手。

二、获取字符串的长度

语法：

str.length

说明：

（1）str就是字符串的名字，即字符串名.length

（2）字符串是个对象，我们在调用对象的属性和方法时，会用到固定的语法：点运算符（.）。

其中"."可以理解为“的”。所以，str.length 可以认为是str的length（长度）。

（3）字符串对象的属性有好几个，但是我们只需要掌握这一个就行。因为这个最常用到。

举例1：

var str = "i love you.";
document.write(str.length); //是11而不是8

举例2：

function getstrlen(num){
    //js的隐式类型转换，数字+空字符串=字符串
    var str = num + "";
    return str.length;
}
var result = "
" + "5201314是" + getstrlen(5201314) + "位数" + "
";
document.write(result);//5201314是7位数

分析：

作为初学者，我们最容易忽略的地方就是：空格。

原来，空格本身也会被作为一个字符来处理的。

三、大小写转换

语法：

字符串名.tolowercase()  //大转小
字符串名.touppercase()  //小转大

说明：

（1）调用对象的方法，也是使用点运算符（.）。

（2）但是与调用属性存在一个区别，方法名后面需要加上一对“()”小括号。

举例：

var str = "i love you.";
document.write("
" + "正常：" + str + "
");//i love you.
document.write("
" + "小写：" + str.tolowercase() + "
");//i love you.
document.write("
" + "大写：" + str.touppercase() + "
");//i love you.

四、截取某一字符（返回字符串中指定位置的某个字符。）

语法：

字符串名.charat(n)

说明：

n为正整数，表示字符串中的第n+1个字符。简单来说，只要记住n是下标就行了。

注意：

（1）字符串中的第1个字符的下标是0，第2个字符的下标是1，以此类推，第n个字符的下标就是n-1。

（2）这一点与数组下标是一样的。

举例：

var str = "monkeyfly";
document.write("
" + "第1个字符是：" + str.charat(0) + "
");//m
document.write("
" + "第9个字符是：" + str.charat(8) + "
");//y

问题：找出字符串中小于某个字符的所有字符

思路：

1.提前定义一个空的字符串，用于保存比较后的字符。
2.for循环遍历字符串，利用charat()方法，将当前得到的字符串中的字符与“某个字符”进行比较。
3.如果当前字符小于要比较的“某个字符”，则将它放在追加到空的字符串中。（循环一次，追加一次）

var str = "hello world！";
//定义一个空字符串用来保存截取后的字符
var result = "";
for (var i = 0; i < str.length; i++) {
    //两个字符之间比较的是ascii码值的大小
    if(str.charat(i) < "s"){
        //注意：+=中间不能用空格隔开，否则会报错
        result += str.charat(i) + ",";
    }
}
document.write("
" + result + "
");//h,e,l,l,o, ,o,r,l,d,

五、截取字符串

语法：

字符串名.substring(start,end)

返回值：

返回一个新的字符串。该字符串是原始字符串的一个子字符串。它的长度是end-start。

说明：

（1）start表示开始位置，end表示结束位置。

（2）start和end都为非负的整数。一般都是从0开始，且end大于start。

（3）截取范围：前闭后开。即[ start,end )，包含start，不包含end。

（4）end可以省略。如果省略不写，表示从start一直截取到字符串的末尾。

注意：

substring() 不接受负的参数。也就是说，它只能从前往后截取，不能从后往前截取。

举例：

var str = "i love you";
var cut = str.substring(2,6);
var end = str.substring(2);
document.write("
" + "待截取的字符串：" + str + "
");//i love you
document.write("
" + "所截取的字符串为：" + cut + "
");//love
document.write("
" + "所截取的字符串为：" + end + "
");//love you

六、替换字符串

语法：

字符串名.replace(原字符串,替换字符串)

字符串名.replace(正则表达式,替换字符串)

说明：

大家一定要记住：不管是哪种形式的替换，替换的字符串始终为第二个参数。

举例1：

第一种形式：字符串替换

var str_old ="i love you!";
var str_new = str_old.replace("you","javascript");
document.write("
" + "原始字符串：" + str_old + "
");//i love you!
document.write("
" + "替换后的字符串为：" + str_new + "
");//i love javascript!

举例2：

第二种形式：正则表达式替换

var str_old ="i love you！i love javascript！i love monkeyfly！";
var str_new = str_old.replace(/i love/g,"我爱");
document.write("
" + "原始字符串：" + str_old + "
");//i love you！i love javascript！i love monkeyfly！
document.write("
" + "替换后的字符串为：" + str_new + "
");//我爱 you！我爱 javascript！我爱 monkeyfly！

分析：

（1）str_old.replace(/i love/g,"我爱"); 表示用正则表达式"/i love/g"来将字符串中的所有"i love"字符替换成“我爱”。

（2）/g是javascript中正则表达式的全局匹配模式 。它是正则表达式对象的其中一个属性，g是global的缩写，表示是否全文搜索。总之，用它就可匹配到所有指定要查找的字符串。

（3）str_old.replace(/i love/g,"我爱"); ≠ str_old.replace("i love","我爱");

前者会替换所有的"i love"，但是后者只能替换遇到的第一个"i love"。

（4）正则表达式比较复杂，如需深入了解和学习，可以在绿叶学习网学习[正则表达式的基础教程]。(https://www.lvyestudy.com/regex/regex_list.x)。

七、分割字符串

在javascript中，我们可以使用split()方法将一个字符串分割成一个字符串数组。

原来的字符串被分割后，它所有的字符片段都会存放在这个数组中。而且分割后得到的字符片段的数量就等于数组元素的个数。

反正只要记住：字符串会被分割为一个数组，这个数组中保存了所有分割的字符片段。

语法：

字符串名.split("分割符",指定返回的数组的最大长度);

说明：

（1）分割符可以是一个字符、多个字符或一个正则表达式。

（2）分割符并不作为 返回数组元素的一部分，因为分割符只是用来分割的。

（3）第一个参数为必需项，第二个参数为可选项。

（4）第二个参数表示，分割字符串之后所截取数组的长度，即得到分割后的前n个元素。

注意：如果没有指定该参数，整个字符串都会被分割，不考虑它的长度。

举例1：

方法一：最笨的方法实现

var str = "html,css,javascript,jquery,ajax";
/*字符串被分割后会转换成一个数组，数组中存放原来字符串中的所有字符片段*/
var arr = str.split(",");/*分割符一定要使用原字符串中存在的符号*/
document.write("
" + "待分割的字符串是：" + str + "
");//html,css,javascript,jquery,ajax
document.write("
" + "分割好的数组是：" + arr + "
");//html,css,javascript,jquery,ajax
document.write("
" + "数组的第1个元素是：" + arr[0] + "
");//html
document.write("
" + "数组的第2个元素是：" + arr[1] + "
");//css
document.write("
" + "数组的第3个元素是：" + arr[2] + "
");//javascript
document.write("
" + "数组的第4个元素是：" + arr[3] + "
");//jquery
document.write("
" + "数组的第5个元素是：" + arr[4] + "
");//ajax

方法二：利用for循环遍历数组来实现

//自定义一个输出函数
function output(){
    for (var i = 0; i < arr.length; i++) {
        document.write("
" + "数组第" + (i+1) + "个元素是：" + arr[i] + "
");
    }
}

分析：

（1）str.split(",")表示用英文逗号作为分隔符来分割字符串。

（2）分割后会得到一个数组["html","css","javascript","jquery","ajax"]。

（3）然后将此数组赋值给变量arr，并输出数组的每一个元素。

举例2：
str.split(" ") 有空格，用空格来分割字符串。

var str = "i love you";
var arr = str.split(" ");
document.write("
" + "待分割的字符串是：" + str + "
");//i love you
document.write("
" + "分割好的数组是：" + arr + "
");//i,love,you
output();
/*
数组第1个元素是：i
数组第2个元素是：love
数组第3个元素是：you
*/

分析：

（1）str.split(" ")是一个带有1个字符的字符串，因为双引号里面包含一个空格。

（2）待分割的字符串中字符之间必须是以空格隔开的。

像下面这样肯定是不行的：

var str = "i,love,you";  
var arr = str.split(" ");

此处应该使用str.split(",")，否则只会分隔出来一个字符"i,love,you"，其他两个数组元素的值都为undefined。

原因：

因为原字符串中是使用英文逗号分隔的，不能乱用。

split("") 无空格，它会分割字符串中的每一个字符。

var str = "i love you";
var arr = str.split("");
document.write("
" + "待分割的字符串是：" + str + "
");//i love you
document.write("
" + "分割好的数组是：" + arr + "
");//i, ,l,o,v,e, ,y,o,u
output();
/*
数组第1个元素是：i
数组第2个元素是： 
数组第3个元素是：l
数组第4个元素是：o
数组第5个元素是：v
数组第6个元素是：e
数组第7个元素是： 
数组第8个元素是：y
数组第9个元素是：o
数组第10个元素是：u
*/

分析：

（1）str.split("")是一个不带有任何字符的字符串，因为双引号之间什么都没有。

（2）它表示分割字符串中的每一个字符，因为它本身不带有分隔符。

注意：

str.split("")与是不一样的str.split(" ")！！！

str.split(" ")是用空格来分割字符串。

【get到很实用的一个技巧】：str.split("")方法可以用来分割字符串中的每一个字符。

举例3：

附带参数的split()方法

var str = "2018/1/8/13/23/16";
var arr = str.split("/",3);
document.write("
" + "待分割的字符串是：" + str + "
");//2018/1/8/13/23/16
document.write("
" + "分割好的数组是：" + arr + "
");//2018,1,8
output();
/*
数组第1个元素是：2018
数组第2个元素是：1
数组第3个元素是：8
*/

我们希望同时按照斜线“/”和冒号“:”对字符串进行分割。

var str = "2018/1/8/13:23:16";
document.write("
" + "待分割的字符串是：" + str + "
");//2018/1/8/13:23:16
/*隐式定义的正则表达式开头和结尾都必须是斜杠“/”。*/
var arr = str.split(/[/,:]/); 
/*[]是正则表达式的范围类，它是闭区间。指的是里面的任何一个值出现都会选中，相当于“或”。*/
或者 
var arr = str.split(/\/|:/);
//1.正则表达式的文本写在"/"与"/"之间，所以"/"是特殊值，需要转义
//2.正则表达式中的转义字符为"\"，"\/"表示将"/"转化为了普通的字符
//3.中间的"|"是正则表达式的选择符，表示“或”。
document.write("
" + "分割好的数组是：" + arr + "
");//2018,1,8,13,23,16
output();
/*
数组第1个元素是：2018
数组第2个元素是：1
数组第3个元素是：8
数组第4个元素是：13
数组第5个元素是：23
数组第6个元素是：16

*/

分析：

（1）因为"/"是正则表达式的特殊符号，因此必须在"/"前面加上“\”对其进行转义，即"\/"。

"\/"表示将"/"这个特殊符号，转换为了普通字符。例如：要匹配字面意义的“\”，就需要使用“\\”表示。

（2）只有学习了字符串对象和数组对象，才能很好地掌握split()方法。

（3）join()方法一般都是配合字符串的split()方法来使用的。

注意：

（1）隐式定义的正则表达式开头和结尾都必须是斜杠"/"。

（2）如果我们要匹配正则表达式中的特殊字符，我们就必须在该特殊字符前面加上反斜杠“\”将其进行转义。

（3）在正则表达式中，选择符是“|”，用于选择2个匹配选项之中的任意一个，类似javascript中的“或”运算。