javascript中字符串对象常用的方法和属性

Posted jjgw

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript中字符串对象常用的方法和属性相关的知识,希望对你有一定的参考价值。

前言

字符串是一种非常重要的数据类型,在Java等面向对象编程语言中,它代表对象类型,而在javascript中它却是一种基本数据类型,在开发的领域中,我们经常会碰到,无论是前端还是后台。比如后台验证手机号码,将手机号码的后四位变成*,这些都是对字符串的处理。所以学会字符串中常用的属性和方法是非常必要的,本篇博客将带你解析字符串常用的属性和方法。那么一起来看看吧!

字符串常用的属性和方法

属性

  • length:返回字符串的长度

方法

  • chatAt():返回在指定位置的字符

  • charCodeAt():返回在指定位置字符的unicode编码(ASCII编码)

  • concat():连接字符串

  • indexOf():从字符串的开头向后搜索字符串

  • lastIndexOf():从字符串的末尾向前搜索字符串

  • match():找到一个或多个正则表达式的匹配

  • replace():替换与正则表达式匹配的字串

  • search():检索与正则表达式相匹配的值

  • slice():提取字符串的片段,并在新的字符串中返回被提取的部分

  • split():把字符串分割成字符串数组

  • substr():从起始索引号提取字符串中指定数目的字符

  • substring():截取字符串中两个指定的索引号之间的字符

  • toLowerCase():将字符串转换为小写

  • toUpperCase():将字符串转换为大写

  • toString():返回字符串本身

  • valueOf():返回某个对象的原始值

  • trim():删除前置及后缀的所有空格

实例讲解

(1):length属性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字符串的length属性</title>
    </head>
    <body>
        <script type="text/javascript">
            //1:创建字符串
            var str1=new String(Hello World);//通过new关键字
            var str2=Hello World;//字面量
            console.log(str1.length);//长度为11
            console.log(str2.length);//长度为11
        </script>
    </body>
</html>

(2):字符方法charAt()和charCodeAt()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字符方法</title>
    </head>
    <body>
        <script type="text/javascript">
            var str=Hello World;//创建字符串
            //1:测试charAt()方法
            console.log(str.charAt(1));//返回e
            //2:测试charCodeAt()方法
            console.log(str.charCodeAt(1));//返回101(ASCII编码)
            console.log(str[1]);//返回e
        </script>
    </body>
</html>

(3):字符串操作方法concat()、slice()、substr()、substring()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字符串的操作方法</title>
    </head>
    <body>
        <script type="text/javascript">
            //1:测试concat()方法
            var str1=Hello ;
            var result=str1.concat(World);
            console.log(str1);    //Hello
            console.log(result);//Hello World
            
            //2:测试slice(startIndex,[lastIndex])方法
            //参数:开始下标,结束下标(可选)
            var stringValue=hello world;
            console.log(stringValue.slice(3));//lo world
            console.log(stringValue.slice(3,7));//lo w
            
            //3:测试substr(startIndex,[lastIndex])方法
            //参数:开始下标,结束下标(可选)
            console.log(stringValue.substr(3));//lo world
            console.log(stringValue.substr(3,7));// lo worl
            
            //4:测试substring(startIndex,[lastIndex])方法
            //参数:开始下标,结束下标(可选)
            console.log(stringValue.substring(3));//lo world
            console.log(stringValue.substring(3,7));//lo w
            
            var item=hello world;
            console.log(item.slice(-3));//rld
            console.log(item.substr(-3));//rld
            console.log(item.substring(-3));//hello world
            console.log(item.slice(3,-4));//lo w
            console.log(item.substr(3,-4));//‘‘空字符串
            console.log(item.substring(3,-4));//hel 
        </script>
    </body>
</html>

这三个方法都返回被操作字符串的一个字符串,而且也接受一个或两个参数,当接受两个参数时,不包含结束下标,第一个参数指定字符串的起始位置,第二个参数(在指定的情况下)表示子字符串到哪里结束,具体来说,slice()和substring()的第二个参数指定的是字符串最后一个字符后面的位置,而substr()的第二个参数指定的则是返回的字符个数。如果没有给这些方法指定第二个参数,则将字符串的末尾作为结束位置。

在传递这些方法的参数是负值的情况下,它们的行为就不尽相同了,其中slice()方法会将传入的负值与字符串长度相加,substr()方法将负的第一个参数加上字符串的长度,而将负的第二个参数转换为0。最后,substring()方法会将所有负值参数转换为0。

(4):字符串位置方法indexOf()和lastIndexOf()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字符串位置方法</title>
    </head>
    <body>
        <script type="text/javascript">
            var stringValue=hello world;
            //1:测试inexOf()方法
            console.log(stringValue.indexOf(o));//4
            console.log(stringValue.indexOf(o,6));//7
            //2:测试lastIndexOf()方法
            console.log(stringValue.lastIndexOf(o));//7
            console.log(stringValue.lastIndexOf(o,6));//4
            
            var item=Lorem ipsum dolor sit amet, consectetur adipisicing elit;
            var positions=new Array();
            var pos=item.indexOf(e);
            while(pos>1)
                positions.push(pos);
                pos=item.indexOf(e,pos+1);
            
            console.log(positions);//3,24,32,35,52;
        </script>
    </body>
</html>

(5):trim()方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>trim()方法</title>
    </head>
    <body>
        <script type="text/javascript">
            var str=         hello world        ;
            var trimStr=str.trim();
            console.log(str);//         hello world      
            console.log(trimStr);//hello world
        </script>
    </body>
</html>

(6):字符串大小写转换方法toLowerCase()和toUpperCase()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字符串大小写方法</title>
    </head>
    <body>
        <script type="text/javascript">
            var str=Hello World;
            console.log(str.toLowerCase());    //hello world
            console.log(str.toUpperCase());//HELLO WORLD
            console.log(str.toLocaleLowerCase());//hello world
            console.log(str.toLocaleUpperCase());//HELLO WORLD
        </script>
    </body>
</html>

(7):字符串的模式匹配方法split()、match()、replace()、search()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字符串的模式匹配方法</title>
    </head>
    <body>
        <script type="text/javascript">
            //1:测试match()方法
            var text1=cat, bat, sat, fat;
            var pattern=/.at/;
            var matches=text1.match(pattern);
            console.log(matches.index);//0
            console.log(matches[0]);//cat
            console.log(pattern.lastIndex);//0
            
            //2:测试search()方法
            var text2=cat bat, sat, fat;
            var pos=text2.search(/at/);
            console.log(pos);//1
            
            //3:测试replace()方法
            var text3=cat, bat, sat, fat;
            var result=text3.replace(at,ond);
            console.log(result);//cond,bat,sat,fat
            result =text3.replace(/at/g,ond);
            console.log(result);//cond,bond,sond,fond
            
            //4:测试split()方法
            var text4=red,blue,green,yellow;
            var colors1=text4.split(,);
            var colors2=text4.split(,,2);
            console.log(colors1);//[‘red‘,‘blue‘,‘green‘,‘yellow‘];
            console.log(colors2);//[‘red‘,‘blue‘];
            
            
        </script>
    </body>
</html>

match()方法本质上与调用RegExp的exec()方法相同,match()方法只接受一个参数,要么是一个正则表达式,要么是一个RegExp对象。

search()方法与match()方法的参数相同,有字符串或RegExp对象指定的一个正则表达式,search()方法返回字符串中第一个匹配项的索引,如果没有找到匹配项,则返回-1,而且,search()方法始终从字符串开头向后匹配查找模式。

replace()方法接收两个参数,第一个参数可以是一个RegExp对象或者一个字符串(这个字符串不会被转换成正则表达式),第二个参数可以可以是一个字符串或者一个函数。如果第一个参数是字符串,那么只会替换第一个子字符串。要想替换所有子字符串,唯一的方法就是提供一个正则表达式,而且要指定全局(g)标志。

split()方法可以基于指定的分隔符将一个字符串分割成多少个字符串,并将结果放在数组中。分隔符可以是字符串,也可以是一个RegExp对象(这个方法不会将字符串看成正则表达式)。split()方法可以接受可选的第二个参数,用于指定数组的大小,以确保返回的数组不会超过既定大小。

总结

字符串是javascript中的一种基本数据类型,javascript的字符串是不可变的,String类定义的方法都不能改变字符串的内容,返回的都是全新的字符串,而不是原始的字符串。

以上是关于javascript中字符串对象常用的方法和属性的主要内容,如果未能解决你的问题,请参考以下文章

JavaScript进阶之常用字符串方法总结

JavaScript中Number常用属性和方法

JavaScript 常用技巧

JavaScript-常用内置对象及方法

javascript中字符串常用操作总结

网站建设之javascript内置对象的分类及基础写法