首页 > 编程语言 >JavaScript html css 字符串对象

JavaScript html css 字符串对象

时间:2024-06-08 21:31:33浏览次数:26  
标签:console log 示例 JavaScript html let str 字符串 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>

标签:console,log,示例,JavaScript,html,let,str,字符串,css
From: https://blog.csdn.net/ndjziskwkhdh/article/details/139551378

相关文章

  • 【JavaScript脚本宇宙】通知新风尚:打造互动性十足的Web提示系统
    定制通知体验:深入了解JavaScript通知库前言在现代web开发中,通知库扮演着至关重要的角色,它们为用户界面的交互性和用户体验提供了关键支持。本文将介绍一些常用的JavaScript通知库,从简单实用到高度定制化各有特色,帮助开发者在项目中轻松实现各种通知功能。欢迎订阅专栏:Ja......
  • uni-app 中使用 html2canvas 生成图片
    1.在项目中安装html2canvas插件npminstallhtml2canvas-D在需要生成图片的页面中引入html2canvas插件不过此时需要在页面中新建一个script节点,将lang属性设置为renderjs如对renderjs不了解,可看下uniapp官网的说明2.编写生成图片的代码<template><view......
  • Tailwindcss Layout布局相关样式及实战案例,5万字长文,附完整源码和效果截图
    aspect相关样式类基础样式ClassPropertiesaspect-autoaspect-ratio:auto;aspect-squareaspect-ratio:1/1;aspect-videoaspect-ratio:16/9;案例:引入B站视频Usetheaspect-*utilitiestosetthedesiredaspectratioofanelement.使用’aspect-*'实用工......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript旅游网站(河南平顶山)
    HTML+CSS+JS【旅游网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript购物商城(美食)
    HTML+CSS+JS【购物商城】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 推荐一个专业的 JavaScript 中文转拼音的库,同事都在用,小巧好用上手快(带私活)
    背景在开发过程中,我们可能会遇到将中文汉字转换成拼音或者拿到我们的汉字的首字母、韵母等等之类的业务需求,自己写一套过于麻烦,所以需要一个库来快速实现,pinyin-pro正是这样一个小巧上手快的工具库,帮助你在业务中操作汉字拼音转换来去自如介绍pinyin-pro是一个专业的Ja......
  • 网页设计与制作基础(HTML+CSS)
    HTML常用标签1、文档结构标签<!DOCTYPEhtml>:告诉浏览器文档是HTML5。<html>:HTML文档的根元素。<head>:包含文档的元数据,如标题、样式和脚本引用等。<title>:设置文档的标题,显示在浏览器的标签页上。<body>:包含文档的可见内容,如文本、图片、链接、列表、表格等。 <!DOCT......
  • html+CSS+js部分基础运用13
    一、三级联动效果如下图所示:图1三级联动二、设计江苏福彩投注站彩票投注助手编程实现江苏福彩投注站彩票投注助手,页面布局效果如图2所示。图2福彩投注站彩票助手页面功能要求如下:单击“机选1注”、“机选5注”或“机选10注”按钮时,能够随机产生相应条数的数据。......
  • html+CSS+js部分基础运用15
    1、完成输入框内容的实时反向输出。2、银行账户余额变动自动通知项目。设计要求:单击按钮后,余额按照输入框的数额减少,同时将按钮式的提示信息(金额)同步改变。利用侦听属性实现余额发生变化时发出提示信息,同时记录每次支出明细,每笔记录包含支取次数,支取金额、余额等信息。3......
  • 纯CSS+单个div实现抖音LOGO
    纯CSS+单个div就能绘制抖音LOGO关键点:主要借助了两个伪元素实现了整体结构,借助了drop-shadow生成一层整体阴影drop-shadow只能是单层阴影,所以另一层阴影需要多尝试contrast(150%)brightness(110%)则可以增强图像的对比度和亮度,更贴近抖音LOGO的效果预览结果如下:在线......