广告位联系
返回顶部
分享到

JavaScript中字符串的常用方法总结

JavaScript 来源:互联网 作者:佚名 发布时间:2022-12-05 21:44:09 人浏览
摘要

1.字符串长度 length属性返回字符串的长度: 1 2 var str = 字符串常用方法总结-东东吖; str.length; //13 2.查找字符串中的位置 有三种查找字符串中的位置: indexOf() lastIndexOf() search() index

1.字符串长度

length 属性返回字符串的长度:

1

2

var str = "字符串常用方法总结-东东吖";

str.length;  //13

2.查找字符串中的位置

有三种查找字符串中的位置:

  • indexOf()
  • lastIndexOf()
  • search()

indexOf()

indexOf() 方法返回字符串中指定文本首次出现的索引(从0开始),如果没有则为-1,可以设置第二个参数,假如第二个参数是 10,则从位置 10 开始检索,直到字符串的起点。

1

2

3

4

5

6

var str = "字符串常用方法总结-东东吖";

str.indexOf('东')  //10

str.indexOf('东',11)  //11

str.indexOf('东东') //10

str.indexOf('方法')  //5

str.indexOf('前')  //-1

lastIndexOf()

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引(从尾到头),如果没有则为-1。可以设置第二个参数,假如第二个参数是 10,则从位置 10 开始检索,直到字符串的起点。(这里需认真理解最后一次的概念)

1

2

3

4

5

6

7

var str = "字符串常用方法总结-东东吖";

str.lastIndexOf('总')     //7

str.lastIndexOf('吖')    //12

str.lastIndexOf('东')    //11

str.lastIndexOf('东',10)  //10

str.lastIndexOf('东东')  //10

str.indexOf('前')       //-1

search()

search() 方法搜索特定值的字符串,并返回匹配的位置:

1

2

3

4

var str = "字符串常用方法总结-东东吖";

str.search('方') //5

str.search('东') //10

str.search('东东') //10

您注意到了吗?

两种方法,indexOf() 与 search(),是相等的。

这两种方法是不相等的。区别在于:

  • search() 方法无法设置第二个开始位置参数。
  • indexOf() 方法无法设置更强大的搜索值(正则表达式)

3.提取部分字符串

有三种提取部分字符串的方法:

  • slice(start, end)
  • substring(start, end)
  • substr(start, length)

substring()和substr()记忆方法:有ing尾巴的使用尾巴,没尾巴的使用长度。

slice()

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数:起始索引(开始位置),终止索引(结束位置)

1

2

var str = "Apple, Banana, Mango";

str.slice(0,8);  // 'Apple, B'   注意此处空格也占一个位置

如果某个参数为负,则从字符串的结尾开始计数。

这个例子裁剪字符串中位置 -12 到位置 -6 的片段:

1

2

var str = "Apple, Banana, Mango";

str.slice(-13,-7);  //'Banana'

如果省略第二个参数,则该方法将裁剪字符串的剩余部分:

1

2

3

var str = "Apple, Banana, Mango";

str.slice(7);     //'Banana, Mango'

str.slice(-13);   //'Banana, Mango'

substring()

substring() 类似于 slice()。

不同之处在于substring() 无法接受负的索引,同样可以省略第二个参数。

1

2

3

var str = "Apple, Banana, Mango";

 str.substring(7,13);  //'Banana'

 str.substring(7); //'Banana, Mango'

substr()

substr() 类似于 slice()。

不同之处在于第二个参数规定被提取部分的长度,同样可以省略第二个参数、如果首个参数为负,则从字符串的结尾计算位置。

1

2

3

4

var str = "Apple, Banana, Mango";

str.substr(7,6);  //'Banana'

str.substr(7);   //'Banana, Mango'

str.substr(-5);  //'Mango'

4.替换字符串内容

  • replace() 方法用另一个值替换在字符串中指定的值
  • replace() 方法不会改变调用它的字符串。它返回的是新字符串
  • replace() 默认只替换首个匹配
  • 如需替换所有匹配,请使用正则表达式的 /str/g 标志(用于全局搜索):
  • 如需执行大小写不敏感的替换,请使用正则表达式/str/i(大小写不敏感):

1

2

3

4

5

6

var str ='我叫东东吖,我是一名前端工程师!';

str.replace("前","后");   // "我叫东东吖,我是一名后端工程师!"

str.replace("东","西");   //"我叫西东吖,我是一名前端工程师!"

 

var str = "Please visit Microsoft!";

str.replace(/MICROSOFT/i, "W3School");    // "Please visit W3School!"

5.转换为大写和小写

通过 toUpperCase() 把字符串转换为大写

通过 toLowerCase() 把字符串转换为小写

1

2

3

4

5

var str ="abc";

str.toUpperCase();    // "ABC"

 

var str ="CBD";

str.toLowerCase();    //"cbd"

6.连接字符串

concat() 连接两个或多个字符串:

1

2

var text = "Hello" + " " + "World!";

var text = "Hello".concat(" ","World!");

所有字符串方法都会返回新字符串。它们不会修改原始字符串。

正式地说:字符串是不可变的:字符串不能更改,只能替换。

7.删除字符串两端的空白符

trim() 方法删除字符串两端的空白符:

1

2

var str = "       Hello Worl d!        ";

str.trim();      // "Hello World!"

8.提取字符串字符

这是两个提取字符串字符的安全方法:

  • charAt() 方法返回字符串中指定下标(位置)的字符串:
  • charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码:

1

2

3

var str = "HELLO WORLD";

str.charAt(0);         //  H

str.charCodeAt(0);     // 72


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://juejin.cn/post/7172819347935592479
相关文章
  • 解读Vue实例的属性及模板渲染

    解读Vue实例的属性及模板渲染
    1 概述 Vue.js是通过new Vue({...})来声明一个实例的,在这个实例中包含了当前页面的HTML结构、数据和事件。 Vue实例是MVVM模式中的ViewModel,实现
  • JavaScript中字符串的常用方法总结
    1.字符串长度 length属性返回字符串的长度: 1 2 var str = 字符串常用方法总结-东东吖; str.length; //13 2.查找字符串中的位置 有三种查找字符串中
  • 解决React报错Expected `onClick` listener to be a function

    解决React报错Expected `onClick` listener to be a function
    当我们为元素的onClick属性传递一个值,但是该值却不是函数时,会产生ExpectedonClicklistener to be a function报错。为了解决该报错,请确保只为元
  • ESLint规范TypeScript代码使用方法
    ESLint 是一种 JavaScript linter,可以用来规范 JavaScript 或 TypeScript 代码,本文教你怎么在项目中快速把 ESLint 安排上。 怎么写出优雅的代码是一
  • Vue屏幕自适应三种实现方法介绍
    使用 scale-box 组件 属性: width宽度 默认1920 height高度 默认1080 bgc背景颜色 默认transparent delay自适应缩放防抖延迟时间(ms) 默认100 vue2版本:
  • 在web worker中使用fetch实例介绍
    1.Web Worker意义 由于 JS 是单线程的,费时的 JS 操作将会导致整个页面的阻塞。Web Worker 提供了创建多线程的方法,将一些耗时且 UI 无关的工
  • 实时通信Socket io的使用介绍

    实时通信Socket io的使用介绍
    最近在工作中,遇到了一个需求,需要和后台服务实时通信,获取各种设备的实时状态、以及对设备下发指令。后端这边选择了socket.io这个
  • js中如何对url进行编码和解码
    js 对url进行编码和解码 三种编码和解码函数 encodeURI和 decodeURI 它着眼于对整个URL进行编码,因此除了常见的符号以外,对其他一些在网址中
  • React RenderProps模式超详细介绍
    render prop是一个技术概念。它指的是使用值为function类型的prop来实现React component之间的代码共享。 如果一个组件有一个render属性,并且这个
  • Vue中ref、reactive、toRef、toRefs、$refs的基本用法总

    Vue中ref、reactive、toRef、toRefs、$refs的基本用法总
    一、ref reactive 1.1.为什么需要ref、reactive ??? setup函数中默认定义的变量并不是响应式的(即数据变了以后页面不会跟着变),如果想让变量变
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计