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中的“或”运算。
下一篇: php 启动时报错的简单解决方法
推荐阅读
-
实例讲解JavaScript截取字符串
-
JavaScript基础教程之字符串对象实例讲解
-
JavaScript for-in遍历,ES6的for-of遍历,可迭代对象的forEach()方法实例讲解
-
Json的概念与Json对象的写法,Json对象与Json字符串转换实例讲解
-
javascript 玩转Date对象(实例讲解)
-
JavaScript面向对象学习之类的创建,类的抽象代码实例讲解
-
JSON语法以及json与JavaScript对象的转换实例讲解
-
JavaScript框架封装之JavaScript中的文本字符串的转义和反转义的实现讲解
-
JavaScript之创意时钟项目(实例讲解)
-
JavaScript for-in遍历,ES6的for-of遍历,可迭代对象的forEach()方法实例讲解