『Javascript基础重点』11.字符串的方法

---

欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
介绍一些Javascript的基础重点知识，包括并不限于函数作用域与提前声明和对象的构造函数等问题。

1. 字符串与数组的联系

因为结构的问题，两者有很多相似之处

• 在底层字符串是以字符数组的形式保存的

  • [“0”,“1”,“2”`````]

• length属性

  • 可以用来获取字符串的长度

• 索引取值

  • str[索引值]

    <script>
      //- 在底层字符串是以字符数组的形式保存的
      //- ["0","1","2"`````]
      var str = "0123456";
      console.log(str); //0123456
      console.log(str.length); //7  字符串长度
      console.log(str[1]); //1  取得了索引位置1的字符“1”
    </script>

---

2. charAt() 根据索引获取指定的字符

• charAt()
  • 可以返回字符串中指定位置的字符
  • 根据索引获取指定的字符

    <script>
      var str = "0123456";
      var result = str.charAt(6);
      console.log(result); //6  和前面的 str[6] 相同
    </script>

---

3. charCodeAt() 获取指定位置字符的字符编码（Unicode编码）

• charCodeAt()
  • 获取指定位置字符的字符编码（Unicode编码）

    <script>
      var str = "0123456";
      var result = str.charCodeAt(0);
      console.log(result); //48  0的Unicode编码值是48
    </script>

---

4. String.formCharCode() 根据字符编码去获取字符

• String.formCharCode()
• • 可以根据字符编码去获取字符

    <script>
      var str = "0123456";
      var result = String.fromCharCode(48);
      console.log(result); //0  Unicode编码值48表示的字符是0
    </script>

---

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

• concat()
• • 可以用来连接两个或多个字符串
• • 作用和+一样

    <script>
      var str = "0123456";
      var result = str.concat("你好", "再见");
      console.log(result); //0123456你好再见
    </script>

---

6. indexof()和lastIndexOf() 查找指定元素位置

• 1.indexof()

• • 该方法可以检索一个字符串中是否含有指定内容
• • 如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1
• • 可以指定一个第二个参数，指定开始查找的位置

• 2.lastIndexOf();

• • 该方法的用法和indexOf()一样，不同的是indexOf是从前往后找，而lastIndexOf是从后往前找
• • 也可以指定开始查找的位置

    <script>
      str = "hello hatguigu";
      result = str.indexOf("h", 1); //从第1号元素开始查找
      console.log(result); //6
      result = str.lastIndexOf("h"); //从第6号元素开始倒着向第0号元素查找
      console.log(result); //0
    </script>

---

7. slice() 字符串中截取指定的内容

• slice()
• • 可以从字符串中截取指定的内容
• • 不会影响原字符串，而是将截取到内容返回
• • 参数：

•   第一个，开始位置的索引（包括开始位置）
  

•   第二个，结束位置的索引（不包括结束位置）
  

•   - 如果省略第二个参数，则会截取到后边所有的
  

•   - 也可以传递一个负数作为参数，负数的话将会从后边计算
  

 <script>
   str = "abcdefghijk";
   result = str.slice(1, 4); //截取[0,3]元素
   console.log(result); //bcd
   result = str.slice(1, -1); //截取[0,str.length-1],负数作为第二个参数，区别是右区间从右侧开始倒数
   //result = str.slice(1, str.length - 1); //等价的写法
   console.log(result); //bcdefghij
 </script>

---

8. substring() 字符串中截取指定的内容

和slice()类似相比的关键区别在于第二个参数不能为负数，会把负数强制转化为0。

• substring()
• • 可以用来截取一个字符串，可以slice()类似
• • 参数：

•   - 第一个：开始截取位置的索引（包括开始位置）
  

•   - 第二个：结束位置的索引（不包括结束位置）
  

•   - 不同的是这个方法不能接受负值作为参数，
  

•   	如果传递了一个负值，则默认使用0
  

•   - 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
  

    <script>
      str = "abcdefghijk";
      result = str.substring(1, 3); //截取[0,2]元素
      console.log(result); //bc

      result = str.substring(1, -2); //截取[0,str.length-1],负数作为第二个参数，区别是右区间从右侧开始倒数
      //result = str.substring(0, 1); //等价上一行的写法，首先参数-2强制变为0，然后交换1，0 顺序为 0，1

      console.log(result); //a
    </script>

---

9. substr()，按照长度截取字符串

• substr()
• • 用来截取字符串
• • 参数：

•   1.截取开始位置的索引
  

•   2.截取的长度
  

    <script>
      str = "abcdefg";

      result = str.substr(3, 2);//从第3位元素开始，截取2个字符

      console.log(result); //de
    </script>

---

10. split() 根据一个字符将字符串分割成数组

• split()
• • 可以将一个字符串拆分为一个数组
• • 参数：

•   -需要一个字符串作为参数，将会根据该字符串去拆分数组
  

    <script>
      str = "abcbcdefghij";
      result = str.split("d");
      console.log(result);//(2) ["abcbc", "efghij"]
      result = str.split(""); //如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素
      console.log(result);//(12) ["a", "b", "c", "b", "c", "d", "e", "f", "g", "h", "i", "j"]
      console.log(Array.isArray(result));//true 类型为数组 
      console.log(result[0]);//a
    </script>

---

11. 字符串字母大小写转化

• toUpperCase()

• • 将一个字符串转换为大写并返回

• toLowerCase()

• -将一个字符串转换为小写并返回

    <script>
      str = "abcbcdefghij123";
      result = str.toUpperCase(); //字母转为大写
      console.log(result); //ABCBCDEFGHIJ123
      result = str.toLowerCase(); //字母转为小写
      console.log(result); //abcbcdefghij123
    </script>

---

12. 小型实战：字符串首位字母大小写

首位字母转为大写，连接上1号元素后所有元素的切片，综合利用上述所有的字符串方法，我们可以基本实现大多数的字符串操作应用。

    <script>
      str = "abcbcdefghij123";
      result = str[0].toUpperCase() + str.substr(1); //首位字母转为大写，连接上1号元素后所有元素的切片
      console.log(result); //Abcbcdefghij123
    </script>

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2023 mzh

Crated：2023-3-1

欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
『1.提前声明问题，你苦恼写了js函数代码但是不会生效的问题吗？』
『2.易错点之函数形参与函数作用域的坑』
『3.了解原型对象优雅地构造函数の“JS中的Java继承” 提高运行效率，优雅地使用对象』
『4.JS垃圾回收机制简析』
『5.以toString()为例学习JS中的java方法重写』
『6.数组的常用方法与数组遍历』
『7.函数进阶之call()和apply()与arguments』
『8.Date类与利用时间戳来测试代码的执行的性能』
『9.Math类方法』
『10.包装类』
『11.字符串的方法』
『12.正则表达式介绍 邮件正则表达式写法』
『13.dom的应用』
『未完待续』

---