JavaScript html css 字符串对象

字符串对象

字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串。

length属性

作用:

  • 获取字符串长度

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'sunmer'</span> 
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">length</span>)  <span style="color:#aa5500">// 6</span></span></span>

indexOf方法

作用:

  • 返回指定内容在原字符串的位置,如果找不到就返回 -1,开始的位置是 index 索引号

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">indexOf</span>(<span style="color:#aa1111">'自'</span>));    <span style="color:#aa5500">// 2 从索引号为0的位置往后查找</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">indexOf</span>(<span style="color:#aa1111">'自'</span>, <span style="color:#116644">3</span>)); <span style="color:#aa5500">// 6 从索引号为3的位置往后查找</span></span></span>

lastIndexOf方法

作用:

  • 从后往前找,只找第一个匹配的

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">lastIndexOf</span>(<span style="color:#aa1111">'自'</span>)); <span style="color:#aa5500">// 6 从后向前找</span></span></span>

charAt方法

作用:

  • 返回指定位置的字符(index 字符串的索引号)

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">charAt</span>(<span style="color:#116644">1</span>)); <span style="color:#aa5500">// 海 返回索引号为1的字符</span></span></span>

concat方法

作用:

  • 拼接字符串,等效于+

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str1</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上,'</span>
<span style="color:#770088">let</span> <span style="color:#0000ff">str2</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'山香红叶时叶红香山。'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str1</span>.<span style="color:#000000">concat</span>(<span style="color:#000000">str2</span>)); <span style="color:#aa5500">// 上海自来水来自海上,山香红叶时叶红香山。</span></span></span>

substr方法

substr(start, length)

作用:

  • 字符串截取:从start位置开始(索引号),length 取的个数

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">substr</span>(<span style="color:#116644">2</span>, <span style="color:#116644">3</span>)); <span style="color:#aa5500">// 自来水</span></span></span>

substring方法

substring(start, end)

作用:

  • 字符串截取:从start位置开始,截取到end位置

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">substring</span>(<span style="color:#116644">2</span>, <span style="color:#116644">3</span>)); <span style="color:#aa5500">// 自</span></span></span>

slice方法

slice(start, end)

作用:

  • 字符串截取:从start位置开始,截取到end位置

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'上海自来水来自海上'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">slice</span>(<span style="color:#116644">2</span>, <span style="color:#116644">3</span>)); <span style="color:#aa5500">// 自</span></span></span>

replace和replaceAll方法

作用:

  • 字符串替换

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'山西运煤车煤运西山'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">replace</span>(<span style="color:#aa1111">'山'</span>, <span style="color:#aa1111">'陕'</span>)); <span style="color:#aa5500">// 陕西运煤车煤运西山 replace只替换第一个</span></span></span>

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'山西运煤车煤运西山'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">replaceAll</span>(<span style="color:#aa1111">'山'</span>, <span style="color:#aa1111">'陕'</span>)); <span style="color:#aa5500">// 陕西运煤车煤运西陕  </span></span></span>
  • replaceAll替换所有的,chrome85开始支持replaceAll

split方法

作用:

  • 将字符串切割成字符串数组

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'2000-10-10'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">split</span>(<span style="color:#aa1111">'-'</span>)); <span style="color:#aa5500">// ['2000', '10', '10']</span></span></span>

toLowerCase方法

作用:

  • 字符串转小写

  • 返回值:

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'Hello Wrold'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">toLowerCase</span>()); <span style="color:#aa5500">// hello wrold</span></span></span>

toUpperCase()方法

作用:

  • 字符串转大写

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'Hello Wrold'</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">toUpperCase</span>()); <span style="color:#aa5500">// HELLO WROLD</span></span></span>

trim方法

作用:

  • 去掉字符串两边的空格

示例:

<span style="background-color:#f8f8f8"><span style="color:#333333"><span style="color:#770088">let</span> <span style="color:#0000ff">str</span> <span style="color:#981a1a">=</span> <span style="color:#aa1111">'   Hello Wrold    '</span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>)         <span style="color:#aa5500">//   Hello Wrold    </span>
<span style="color:#000000">console</span>.<span style="color:#000000">log</span>(<span style="color:#000000">str</span>.<span style="color:#000000">trim</span>()); <span style="color:#aa5500">//Hello Wrold</span></span></span>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/24918.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里云ECS服务器部署javaweb项目实操

在阿里云ECS实例上部署Java Web项目涉及几个主要步骤&#xff1a;创建和配置ECS实例、安装必要的软件&#xff08;JDK、Web服务器、数据库等&#xff09;、部署Java Web应用程序以及配置防火墙和安全组。以下是详细的步骤&#xff1a; 步骤1&#xff1a;创建ECS实例 登录阿里云…

【Centos7】CentOS 7下的PyTorch安装策略:高效实践指南

【Centos7】CentOS 7下的PyTorch安装策略&#xff1a;高效实践指南 大家好 我是寸铁&#x1f44a; 总结了一篇【Centos7】CentOS 7下的PyTorch安装策略&#xff1a;高效实践指南✨ 喜欢的小伙伴可以点点关注 &#x1f49d; 前言 由于需要跑深度学习&#xff0c;要用到pytorch&a…

java的序列化与反序列化

一、定义 Java序列化和反序列化&#xff1a;序列化就是指把Java对象转换为字节序列的过程。&#xff08;例如将一个类转化为json类型&#xff09;反序列化就是指把字节序列恢复为Java对象的过程。 在Java实际运用中&#xff0c;,许多方面应用序列化反序列化——持久化、通信、…

重塑楼宇管理:智慧管控可视化开启高效新篇章

借助图扑智慧楼宇管控可视化技术&#xff0c;实现实时监控与智能化管理&#xff0c;快速响应潜在问题&#xff0c;确保楼宇安全、节能和高效运行。

Git之解决重复输入用户名和密码(三十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

快速入门Linux及使用VSCode远程连接Linux服务器

在当前的技术环境中&#xff0c;Linux操作系统因其强大的功能和灵活性而广受欢迎。无论你是开发人员、系统管理员还是技术爱好者&#xff0c;学习Linux都是提升技术技能的重要一步。本文将介绍如何快速入门Linux&#xff0c;并使用Visual Studio Code&#xff08;VSCode&#x…

时光正好保剑锋的抱治百病与成年人的世界

《时光正好》&#xff1a;保剑锋的“抱治百病”与成年人的世界在繁忙的都市里&#xff0c;每个角落上演着各自的人生戏码。而在这些戏码中&#xff0c;由保剑锋主演的《时光正好》无疑成为了近期引人注目的焦点。这部电视剧以其真实而深刻的剧情&#xff0c;让我们看到了成年人…

深入了解Linux中的db_dump185命令

深入了解Linux中的db_dump185命令 在Linux系统中&#xff0c;db_dump185可能不是一个广为人知的命令&#xff0c;但它对于某些特定的数据库或文件系统任务来说却是一个非常有价值的工具。特别是当你与旧版的Berkeley DB数据库或类似的存储机制打交道时&#xff0c;db_dump185可…

SpringBoot+Vue实现前后端分离基本的环境搭建

目录 一、Vue项目的搭建 &#xff08;1&#xff09;基于vite创建vue项目 &#xff08;2&#xff09;引入elementplus &#xff08;3&#xff09;启动后端服务&#xff0c;并测试 二、SpringBoot项目的搭建 &#xff08;1&#xff09;通过idea创建SpringBoot项目 &#x…

有效的括号(oj题)

一、题目链接 https://leetcode.cn/problems/valid-parentheses/submissions/538110206 二、题目思路 利用栈的性质&#xff0c;后进先出 1.依次读取字符串&#xff0c;判断是否为左括号&#xff0c;如果是&#xff0c;就将其入栈。 2.如果读取的不是左括号&#xff0c;就说…

【网络教程】Iptables官方教程-学习笔记7-简单理解IPTABLES规则的作用流程

前面学习了IPTABLES的所有功能介绍后&#xff0c;一个Linux设备里的IPTABLES规则集是如何运行的&#xff0c;这里简单做个介绍。 在Linux设备里输入"iptables -nvl",得到该设备的所有防火墙规则&#xff0c;得到的结果中可以看到这个设备防火墙里所有的链以及链里的…

Git从入门到放弃

由于我的Git学的不太好&#xff0c;所以为了能够将以后我的学习笔记能够整理的更好&#xff0c;我先要系统的学习一下git&#xff0c;文章由此产生。 文章笔记源自尚硅谷Git入门到精通全套教程视频内容 1 进入官网 学习新技术的第一步需要熟悉官网&#xff0c;Git也不例外。ht…

【区分vue2和vue3下的element UI ¶Upload 上传组件,分别详细介绍属性,事件,方法如何使用,并举例】

在 Vue 2 中&#xff0c;我们通常使用 Element UI 的 el-upload 组件来实现文件上传功能。然而&#xff0c;在 Vue 3 中&#xff0c;由于 Element UI 没有官方支持 Vue 3 的版本&#xff0c;我们通常会使用 Element Plus&#xff08;Element UI 的 Vue 3 版本&#xff09;的 el…

海豚调度器调用api接口启动工作流(亲试可用)

一、前言 在大数据时代,工作流调度器成为了数据管道和ETL任务中不可或缺的工具。DolphinScheduler作为一款强大的工作流调度器,支持多种任务类型和工作流的可视化管理。除了通过Web界面操作外,DolphinScheduler也提供了API接口,使得第三方系统集成和自动化脚本调用成为可能…

理论学习-自动控制

自动控制 前馈控制简介表现形式前馈 - 反馈 结合使用 前馈控制 简介 前馈控制 什么&#xff1f;作用 &#xff1f;条件&#xff1f; 没有表达形式&#xff08;具体的&#xff09;&#xff0c;控制方法。提高响应速度&#xff0c;减小误差&#xff0c;增加带宽而不改变稳定性…

Langchain的向量存储 - Document与简单字符串列表的区别

文章目录 前言一、 使用简单字符串列表1. 示例2. 优点3. 缺点 二、 使用 Document 类1. 示例2. 优点3. 缺点 三、 综合比较四、 示例对比1&#xff1a;简单字符串列表2&#xff1a;使用 Document 类 总结 前言 在 LangChain 中&#xff0c;使用简单字符串列表&#xff08;如 t…

【Python报错】已解决AttributeError: ‘Series’ object has no attribute ‘columns’

成功解决“AttributeError: ‘Series’ object has no attribute ‘columns’”错误的全面指南 一、引言 在Python的数据处理和分析中&#xff0c;Pandas库是一个不可或缺的工具。然而&#xff0c;在使用Pandas时&#xff0c;可能会遇到各种错误&#xff0c;其中之一就是“Att…

【C++】、【Redis】、【人工智能】与【大数据】的深度整合

C++、Redis、人工智能和大数据的深度整合涉及多个方面,包括数据存储、处理、优化以及在不同技术栈之间的交互。以下是对这四个领域深度整合的详细分析: 一、C++与Redis的整合 数据存储与访问: Redis作为一个高性能的Key-Value数据库,非常适合作为C++应用的缓存层。通过hir…

k8s 对外发布(ingress)

在k8s中&#xff0c;service的作用体现在两个方面&#xff0c;对集群内部&#xff0c;它不断跟踪pod的变化&#xff0c;更新endpoint中对应pod的对象&#xff0c;提供了ip不断变化的pod的服务发现机制&#xff1b; 对集群外部&#xff0c;他类似负载均衡器&#xff0c;可以在集…

HTML静态网页成品作业(HTML+CSS)—— 24节气立夏介绍网页(1个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有1个页面。 二、作品演示 三、代…