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

时间：2022-10-09 13:56:57

前言

字符串是一种非常重要的数据类型，在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中字符串对象常用的方法和属性的更多相关文章

  1. JavaScript操作Array对象常用的方法

     转换方法 因为JavaScript内部机制(继承),所有的对象都具有toLocalString() .toString().valueOf()方法,Array也不例外so:var colors = ...

  2. JS中String对象常用的方法

    1.  stringObject.charAt(index) 参数:index 必需,即字符在字符串中的下标.  返回值:   返回在指定位置的字符.返回的字符是长度为 1的字符串.(length属性 ...

  3. javascript中，数组常用的方法有哪些？

    答案: push pop shift unshift join sort concat reverse splice slice indexOf

  4. JavaScript中判断对象类型方法大全1

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  5. JavaScript中判断对象类型的种种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  6. javascript中字符串常用操作整理

    javascript中字符串常用操作整理 字符串的操作在js中非常频繁,也非常重要.以往看完书之后都能记得非常清楚,但稍微隔一段时间不用,便会忘得差不多,记性不好是硬伤啊...今天就对字符串的一些常用 ...

  7. 转 JavaScript中判断对象类型的种种方法

    我们知道,JavaScript中检测对象类型的运算符有:typeof.instanceof,还有对象的constructor属性: 1) typeof 运算符 typeof 是一元运算符,返回结果是一 ...

  8. JavaScript中，有三种常用的绑定事件的方法

    要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的 ...

  9. JavaScript中字符串的match与replace方法

    1.match方法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. match()方法的返回值为:存放匹配结果的数组. 2.replace方法 replace() 方 ...

随机推荐

  1. 一些关于angularJS的自己学习和开发过程中遇到的问题及解决办法

    这篇文章也许会不定时更新,主要记录这段时间内自己遇到的angularjs学习开发的一些问题的解决办法.本文以摘抄为主,主要目的还是将自己遇到的困惑在各个地方查到的解决办法的汇总,给自己留个备忘吧. 1 ...

  2. ionic 踩过的坑

    内联模板 : script可能你没有注意过,HTML中常用的script标签在AngularJS中被重新定义了: 除了原来的脚本声明功能之外,如果script元素的type属性 定义为text/ng- ...

  3. ndk学习20&colon; jni之OnLoad动态注册函数

    一.原理 当在系统中调用System.loadLibrary函数时,该函数会找到对应的动态库, 然后首先试图找到"JNI_OnLoad"函数,如果该函数存在,则调用它 JNI_On ...

  4. 算法手记 之 数据结构（堆）&lpar;POJ 2051&rpar;

    一篇读书笔记 书籍简评:<ACM/ICPC 算法训练教程>这本书是余立功主编的,代码来自南京理工大学ACM集训队代码库,所以小编看过之后发现确实很实用,适合集训的时候刷题啊~~,当时是听了 ...

  5. Apache与Tomcat 区别联系

    Apache 和 Tomcat 都是web网络服务器,两者既有联系又有区别,在进行HTML.PHP.JSP.Perl等开发过程中,需要准确掌握其各自特点,选择最佳的服务器配置. Apache是web服 ...

  6. dubbo-RPC学习（一）自定义配置

    在dubbo的基础上实现异步调用的时候,因为需要支持回调的“重试间隔时间”与“重试次数”等属性.因此,需要扩展dubbo.xsd,需要添加新的属性来支持这种扩展. dubbo 的xsd是基于sprin ...

  7. 重读JAVA编程思想

    当年如猪八戒吃人生果般的读了java编程思想,只是知道这是本好书,但是具体细节,真是不知所云,很多都是工作中用到哪些,然后就翻<think in java >和<core java& ...

  8. Google addword 策略

    https://support.google.com/adwords/answer/1704392?hl=zh-Hans&authuser=0 顾客会用自己的思路去解决生意上的问题,想要拥有自 ...

  9. 和菜鸟一起学linux之DBUS基础学习记录

    D-Bus三层架构 D-Bus是一个为应用程序间通信的消息总线系统, 用于进程之间的通信.它是个3层架构的IPC 系统,包括: 1.函数库libdbus ,用于两个应用程序互相联系和交互消息. 2.一 ...

  10. Azkaban日志中文乱码问题解决

    Azkaban作为LinkedIn开源的任务流式管理工具,在工作中很大程度上被用到.但是,由于非国人开发,对中文的支持性很不好.大多数情况下,会出现几种乱码现象: - 执行内置脚本生成log乱码 - ...

相关文章