字符串的基础

已于 2022-03-31 19:49:42 修改
阅读量1.1k 收藏
点赞数
文章标签： javascript html5
于 2022-03-31 00:00:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68030167/article/details/123854616
版权

字符串的创建(2种方法)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
// 字符串的创建(2种方法创建)
//         1. 字面量方式创建
           var str = '码小目'
           console.log( str)
           var str = "maxiaomu"
           console.log( str)
           var str = `112233`   
           console.log( str)
        //   也叫作模板字符串
        // 2. 内置构造函数创建
           var str = new String('码小目')
           console.log( str)
           var str = new String("maxiaomu")
           console.log( str)
           var str = new String(`112233` )
           console.log( str)
</script>
</body>
</html>

两种创建方法如上所属,其返回值如下:

方法一:字面量法

这种方法创建的是整体是一个字符串 

方法二: 内置构造函数创建

 这种方法创建的是一个字符串的集合,其中所有的都是单个的字符串类型

 字符串的基本操作

1. length 属性( 即'读'  获取)

语法: 字符串.length

 得到: 该字符串的长度, 也就是该字符串由多少个字符组成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
// 字符串的创建(2种方法创建)
//         1. 字面量方式创建
           var str = '码小目'
           console.log( str.length)
           var str = "maxiaomu"
           console.log( str.length)
           var str = `112233`   
           console.log(str.length)
        //   也叫作模板字符串
        // 2. 内置构造函数创建
           var str = new String('码小目')
           console.log(str.length)
           var str = new String("maxiaomu")
           console.log( str.length)
           var str = new String(`112233` )
           console.log( str.length)
</script>
</body>
</html>

注意: 在字符串内, 空格是占有长度的, 中文也是一个字符长度

        2. 索引  读(获取)

          + 是一个只读的属性

          + 字符串也是按照索引排列的

            => 语法: 字符串[索引]     

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
// 字符串的创建(2种方法创建)
//         1. 字面量方式创建
           var str = '码小目'
           console.log( str[2])
           console.log( str[4])
           var str = "maxiaomu"
           console.log( str[2])
           console.log( str[12])
           var str = `112233`   
           console.log( str[4])
           console.log( str[8])
        //   也叫作模板字符串
        // 2. 内置构造函数创建
           var str = new String('码小目')
           console.log( str[2])
           console.log( str[4])
           var str = new String("maxiaomu")
           console.log( str[2])
           console.log( str[12])
           var str = new String(`112233` )
           console.log( str[4])
           console.log( str[8])
</script>
</body>
</html>

 如果字符串有该索引位置, 那么就是该索引位置的字符

 如果字符串没有该索引位置, 那么就是 undefined

 3. 遍历

          + 因为 字符串 也是按照索引排列

          + 所以依旧使用 循环 进行遍历(一组从0开始的有规律数字)

 根据此处代码以及返回值可以看出

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 字符串的创建(2种方法创建)
        //  1. 字面量方式创建
        var str = '码小目'
        var re= fn( str)
             console.log( re)
        var str = "maxiaomu"
        var re= fn( str)
             console.log( re)
        var str = `112233`
        var re= fn( str)
             console.log( re)
        //   也叫作模板字符串
        // 2. 内置构造函数创建
        var str = new String('码小目')
        var re= fn( str)
             console.log( re)
        var str = new String("maxiaomu")
        var re= fn( str)
             console.log( re)
        var str = new String(`112233`)
             var re= fn( str)
             console.log( re)    
function fn() {
            for (var i = 0; i < str.length; i++) {
                //   i 就是字符串内每一个字符的索引
                console.log(' 我是索引'+`${i}`,str[i])
                //就是字符串内的每一个字符
            }
    return    res=console.log(str[i])
   }
    </script>
</body>

</html>

 字符串常用方法

 JS 提供的一系列操作 字符串 的方法

注意: 所有字符串常用方法均不会改变原始字符串, 都是返回值形式给出结果

 1. charAt()

        + 语法: 字符串.charAt(索引)===字符串[ 索引 ]

        + 返回值:

          -> 如果字符串有该索引位置, 那么就是该索引位置的字符

          -> 如果字符串没有该索引位置, 那么就是 空字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
      
        // 内置构造函数创建
        var str = new String('码小目')
             console.log( str.charAt( 2))
             console.log( str[ 12])
        var str = new String("maxiaomu")
            console.log( str.charAt (2))
             console.log( str [14])
            
        var str = new String(`112233`)
          
        console.log( str.charAt (2))
             console.log( str [8])
 
    </script>
</body>

</html>

  2. charCodeAt()

        + 语法: 字符串.charCodeAt(索引)

        + 返回值:

          -> 如果字符串有该索引位置, 那么就是该索引位置的字符的编码(UTF-8)

          -> 如果字符串没有该索引位置, 那么就是 NaN

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
      
        // 内置构造函数创建
        var str = new String('码小目')
             console.log( str.charCodeAt( 2))
        var str = new String("maxiaomu")
            console.log( str.charCodeAt (2))
        var str = new String(`112233`)
        console.log( str.charCodeAt (2))
    </script>
</body>

</html>

  3. toUpperCase()

        + 语法: 字符串.toUpperCase()

        + 返回值: 转换好大写字母以后的字符串

 4. toLowerCase()

        + 语法: 字符串.toLowerCase()

        + 返回值: 转换好小写字母以后的字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
      
        // 大小写转换
        var str = new String("MaXiAoMu")
        // 转换成大写
            console.log( str.toUpperCase (  ))
        // 转换成小写
            console.log( str.toLowerCase (  ))
    </script>
</body>

</html>

 大小写转换效果如上图所示:toUpperCase()          toLowerCase()

 5. substr()

    语法: 字符串.substr(开始索引, 截取多少个)

      返回值: 从原始字符串内截取出来的字符串片段

 6. substring()

        + 语法: 字符串.substring(开始索引, 结束索引)

        特点: 包前不包后, 包含开始索引, 不包含结束索引

      返回值: 从原始字符串内截取出来的字符串片段

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = new String("Ma-Xi-Ao-Mu -")
        //  字符串.substr(开始索引, 多少个)
            console.log( str.substr (2,6))
       //字符串.substring(开始索引, 结束索引)   包前不包后
            console.log( str.substring (2,8))
    </script>
</body>

</html>

  7. slice() 和数组方法同名

        + 语法: 字符串.slice(开始索引, 结束索引)

     特点1: 包前不包后/ 特点2: 可以填写负整数

  8. split   (  )

        + 语法: 字符串.split(切割符号)---

        + 作用: 把字符串按照符号切割成一个数组

        + 返回值: 是一个数组数据类型

如果传递一个空字符串, 表示按照一位一位的切割开    (' ')    

  数组内是你把原始字符串切割开的每一个部分

8. replace(  )    replaceAll( 全部替换 )

        + 语法: 字符串.replace(换下字符, 换上字符)

        + 返回值: 替换好一个以后的字符串

        + 注意: 不管有多少个换下字符, 只能替换第一个

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = new String("Ma-Xa-ao-Ma -")
        //      replace  将第一个a替换成A
            console.log(str.replace('a','A') )
            // replaceAll  将所有a替换成A
            console.log( str. replaceAll('a','A') )
       
    </script>
</body>

</html>

  10. indexOf(   )   

        + 语法: 字符串.indexOf(字符串片段, 开始索引)

        + 返回值: 如果原始字符串内有该字符串片段, 那么就是该字符串片段的起始索引位置

          如果原始字符串内没有该字符串片段, 那么就是 -1      注意: 从左向右查找

      11. lastIndexOf(   )   

        + 语法: 字符串.lastIndexOf(字符串片段, 开始索引)

        + 返回值    如果原始字符串内有该字符串片段, 那么就是该字符串片段的起始索引位置

         如果原始字符串内没有该字符串片段, 那么就是 -1    注意: 从右向左查找

   

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = new String("MaXaaoMa")
// 从左向右  第一个a   索引1
 var res=str.indexOf('a',1 )
console.log(res)
// 从左向右  第一个F  索引-1  不存在
console.log( str.indexOf('F',1)   )
// 从右向左  第一个M   索引6
var res=str.lastIndexOf('M',8)
console.log(res)


       
    </script>
</body>

</html>

  12. concat()   和数组方法同名

        + 语法: 字符串.concat(字符串2, 字符串3)

        + 作用: 字符串拼接

        + 返回值: 拼接好的字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
     var str = new String("MaXaaoMa")
console.log(str.concat(',--',1 ))
console.log(str.concat('/kk' ,'fd'))
console.log(str.concat('gg-',true ))

    </script>
</body>

</html>

   13. trim()

       语法: 字符串.trim()

     返回值: 去除了首尾空白内容以后的字符串

      14. trimStart() / trimLeft()

       字符串.trimStart()

       字符串.trimLeft()

         返回值: 去除了开头位置空白内容以后的字符串

      15. trimEnd() / trimRight()

        + 语法:

  字符串.trimEnd()

  字符串.trimRight()

返回值: 去除了结束位置空白内容以后的字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
     var str = new String("      MaX   aao   Ma   ")

    //  返回值: 去除了首尾空白内容以后的字符串
console.log(str.trim())
// trimStart() / trimLeft()  去除了开头位置空白内容以后的字符串
console.log(str.trimStart())
console.log(str.trimLeft())
// trimEnd() / trimRight()   去除了结束位置空白内容以后的字符串
console.log(str.trimEnd())
console.log(str.trimRight())

    </script>
</body>

</html>

  

 字符串的几种常用分类格式

普通字符串   'dsfasdfugsdfhkg'

数字字符串   '1234567890'

 html字符串  '<p>文本内容</p>'

 查询字符串   'key=value&key2=value2'

 json字符串  '{ "name": "Jack", "age": 18 }'   交互使用  轻量级   键和值全部使用"  "进行包含

 json 格式字符串的操作

JS 的数据结构转换成 json 格式字符串

 语法: JSON.stringify( JS 的对象或者数组 )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <script>

  //   JSON.stringify( JS 的对象或者数组 )     
var str=('qwe1234---')
console.log(typeof (str),str)
var str2=JSON.stringify( str)
console.log(typeof (str2),str2)
var arr={name:'jack',age:'18'}
console.log(typeof (arr),arr)
var arr2=JSON.stringify( arr)
console.log(typeof (arr2),arr2)

   </script> 

</body>
</html>

 

  json 格式字符串转换成 JS 的数据结构

  JSON.parse( json 格式字符串 )

码小目
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
字符串基础.xmind
11-23
字符串基础.xmind
字符串基础
Sun
11-16 472
一、字符串的三种形式 1." "；双引号之间的字符串(结尾自动添加'\0')。 2.以'\0'结尾的字符串数组。 3.string(STL);这里不做过多解释,以后再做详解。 这里留一个思考题:字符串数组和字符串有什么区别？(提示:结尾的'\0'结束符) 二、字符串的输入输出 1.scanf();遇见空格、换行输入结束。回车时自动添加‘\0’；在处理字符时,输入回车或者空格,这些字符会...
字符串-基础
weixin_34218890的博客
05-10 100
1.字符串的定义方式 1 #字符串的定义方式 2 #1.单引号定义字符串 '' 3 str = '博客园' 4 #2.双引号定义字符串"" 5 str2 = "双引号字符串" 6 #3.三引号定义字符串 '''内容''' 或者 """内容""" 2.+号字符串连接运算 1 # +号字符串连接运算 2 str1 = '鹅鹅鹅' 3 str2 = '曲...
字符串基础知识点
Internet_Z的博客
10-08 400
字符串基础内容以及相关方法
字符和字符串的基础知识
谷哥的小弟
02-21 1664
/* ============================================================================ Name : TestChar.c Author : lf Version : Copyright : Your copyright notice Description : 字符和字符串的基
正则表达式模式匹配字符串基础知识
12-13
 在实际项目中有个功能的实现需要解析一些特定模式的字符串。而在已有的代码库中，在已实现的部分功能中，都是使用检测特定的字符，使用这种方法的缺点是： 逻辑上很容易出错 很容易漏掉对一些边界条件的检查 ...
c语言基础之字符串+转义字符
01-03
字符串的基本概念 “hello,world!” 像这种由双引号引起来的一串字符称为字符串字面值，简称字符串。 'a' C语言中用单引号引起来的叫做字符 a 用双引号括起来的叫做字符串 注意： C语言是不提供字符串类型的 ，...
Python基础——字符串
12-22
字符串基础及操作 一.字符串定义 字符串是python语言常见的数据类型， 可以使用单引号和双引号来创建字符串。 如：\na='student'\nb=''student'' 变量a和b均表示字符串。 python语言不支持单字符类型，即单字符也...
字符串基础学习笔记（一）
baidu_41924510的博客
04-08 246
1、字符串（String）①字符串是属于引用数据类型。②String 类代表字符串。Java 程序中的所有字符串字面值（如 "abc" ）都作为此类的实例实现。字符串是常量；它们的值在创建之后不能更改。package cn.tx.string; public class StringDemo1 { public static void main(String[] args) { /...
C语言——字符串基础详解
热门推荐
qq_40918707的博客
03-31 1万+
字符数组 char word[] = {'H', 'e', 'l', 'l', 'o', '!'}; word[0] H word[1] e word[2] l word[3] l word[4] o word[5] ! 字符串 char word[] = {'H', 'e', 'l', 'l', 'o', '!', '\0'}; word[0] H...
React中JSX语法入门
woliuhuaqiangla的博客
05-12 766
通过使用大括号{}，可以在JSX中使用任何有效的JavaScript表达式，包括变量、函数调用、算术运算和条件语句等。JSX将HTML标签和JavaScript代码结合在一起，可以在其中使用JavaScript表达式，并且可以通过使用大括号{}来嵌入JavaScript代码。通过使用JSX，我们可以在JavaScript代码中嵌入HTML标记，从而更容易地构建可复用的UI组件。在React中的JSX中，也可以使用任何有效的JavaScript表达式，包括变量、函数调用、算术运算、条件语句等。
TypeScript中的函数类型注解：精确定义行为与意图
逐星的博客
05-11 399
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
前端Vue架构
weixin_45678402的博客
05-12 277
defineProperty：监听范围比较窄，只能通过属性描述符去监听已有属性的读取和赋值；兼容性较差，只能兼容支持ES6 的浏览器（要求监听数据是对象）这样写的话，依赖收集只能收集到属性c；如果访问的属性值还是一个对象，对属性值再次进行代理；创建视图的函数（render）和数据之间的关联；当数据发生变化的时候，希望render重新执行；下面的用法，只能收集到c，收集不到c1。依赖收集：a color: #f00。依赖收集：a color: #f00。如何知晓数据对应的函数；监听数据的读取和修改；
Vue.js的发展史（一）
最新发布
2301_79683791的博客
05-15 435
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
字符串基础代码
05-24
以下是一些常见的字符串基础代码： 1. 字符串长度： ```python string = "Hello World!" length = len(string) print(length) # 输出 12 ``` 2. 字符串拼接： ```python string1 = "Hello" string2 = "World" string3 = string1 + " " + string2 print(string3) # 输出 "Hello World" ``` 3. 字符串分割： ```python string = "apple,banana,orange" fruits = string.split(",") print(fruits) # 输出 ["apple", "banana", "orange"] ``` 4. 字符串查找： ```python string = "Hello World!" index = string.find("World") print(index) # 输出 6 ``` 5. 字符串替换： ```python string = "Hello World!" new_string = string.replace("World", "Python") print(new_string) # 输出 "Hello Python!" ``` 6. 字符串判断： ```python string = "Hello World!" if "Hello" in string: print("Yes") # 输出 "Yes" else: print("No") ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码小目

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值