Ⅵ JavaScript字符串

目录

（一）字符串介绍

1.概念

2.创建字符串

3.字符串操作

（二）模板字符串

1.概念

2.特点

3.作用：

（三）字符串常用方法

charAt(索引号)

indexOf('字符')

lastIndexOf('字符')

substring(开始索引，结束索引)

substr(开始索引，字符个数 )

splite('用于分割字符串')

trim()

includes()

replace('原有的字符串'，'要替换的字符串')

startsWith(子字符串)

endsWith(子字符串)

toUpperCase()

toLowerCase()

（四）练习

---

（一）字符串介绍

1.概念

字符串是js内置对象，字符串string是基本数据类型，在js中基本数据类

型，在使用的时候会自动转化为原型数据类型，使用完之后又自动转为基

本数据类型。

2.创建字符串

<script>
    // 字面量：
    var str = 'hello'
    // 构造函数创建
    var str = new String('hello')
</script>

3.字符串操作

①字符串也有length属性（表示字符串长度），也就是字符串中字符串个

数。

注：空字符也算一个字符

②字符串是按照索引排列，可以通过索引访问每一个字符，字符值只能访

问不能改变。

③可以通过for循环遍历字符串

---

（二）模板字符串

1.概念

模板字符串是创建字符串的另一种方式，反引号引起来的字符串

2.特点

在反引号引起的字符串中可以将${ 变量}值解析出来

${变量}

3.作用：

• 字符串拼接时更方便

• 操作长字符串时可以直接换行，不用连接符连接

<script>
    var str = `hello`
    // console.log(typeof str)
    var num = 100
    // var str = 'num = '+100
    var str = `num = ${num}`
    console.log(str)
</script>

---

（三）字符串常用方法

charAt(索引号)

=> 返回索引号对应字符

<script>
    var str = 'hello' // 索引号 0 1 2 3 4
    var chars = str.charAt(1) // 索引号为1的项
    console.log( chars ) // e
</script>

indexOf('字符')

=> 返回字符对应索引号

<script>
    var str = 'hello' // 索引号 0 1 2 3 4
    var index = str.indexOf('e') // 找e的索引号
    console.log('index :',index) // index : 1
</script>

lastIndexOf('字符')

=> 返回字符对应索引号

<script>
    var str = 'hello' // 索引号 0 1 2 3 4
    var index = str.lastIndexOf('l') // 找l的索引号
    console.log('index :',index) // index : 3
</script>

substring(开始索引，结束索引)

=> 返回截取从开始索引到结束索引之间的字符串

substring(开始索引)

=> 返回截取从开始索引到最后的所有字符串

<script>
    var str = 'hello' // 索引号 0 1 2 3 4
    var sub1 = str.substring(1,3)  
    console.log(sub1) // el
    var sub2 = str.substring(1)
    console.log(sub2) // ello
</script>

substr(开始索引，字符个数 )

=> 返回截取后的子字符串

<script>
    var str = 'hello' // 索引号 0 1 2 3 4
    var sub1 = str.substr(1,2)  
    console.log(sub1) // ell
</script>

splite('用于分割字符串')

=> 将分割之后的字符存储数组中返回

<script>
    var str = 'hello' // 索引号 0 1 2 3 4
    var sub1 = str.splite('-')  
    console.log(sub1) // h-e-l-l-o
</script>

trim()

=> 删除字符串两端的空白符，返回去掉空格的新字符

<script>
   var str2 = '   hello  ' // 两端有空格的字符串
   console.log(str2) 
   var newStr2 = str2.trim()
   console.log(newStr2)
</script>

includes()

=> 用于判断字符串是否包含指定的子字符串

=> 如果找到匹配的字符串则返回 true，否则返回 false

<script>
    var str = 'Hello world, welcome to the Runoob'
    var n = str.includes('world')
    console.log(n) // true
</script>

replace('原有的字符串'，'要替换的字符串')

=> 在字符串中用一些字符替换另一些字符

<script>
     var str = 'abcdefghijk'
     var a = str.replace('ijk','xyz')
     console.log(a) //abcdefghxyz
</script>

startsWith(子字符串)

=> 判断字符串是否以子字符串开始

=> 是则返回true,否则返回false

<script>
    var s1 = 'javascript-html-css'
    var isOk = s1.startsWith('html')
    console.log('isOk :',isOk) // false
</script>

endsWith(子字符串)

=> 判断字符串是否以子字符串结束

=> 是则返回true,否则返回false

<script>
    var s1 = 'javascript-html-css'
    var isOk = s1.endsWith('css')
    console.log('isOk :',isOk) // true
</script>

toUpperCase()

=>将字符串转为大写字符返回

<script>
    var s2 = 'hello'
    var ns2 = s2.toUpperCase()  
    console.log('ns2 :',ns2) // HELLO
</script>

toLowerCase()

=> 将字符串转为小写字符返回

<script>
    var s3 = 'HELLO'
    var ns3 = s3.toLowerCase()  
    console.log('ns3 :',ns3) //  hello
</script>

---

（四）练习

1.统计字符出现的次数

<script>
// 统计字符串中不同字符的出现次数?
// 'abcdefabcadefkmmkggcc'
// 分析：
// 计数器 
//      var count = 0 
//       满足条件 count++
// 
//     统计多个元素次数
//       var obj = {
//           a:1,
//           b:2,
//           c:4,
//           ...
//       }   
//     升级版计数器
//       简单对象
//         属性名作为统计的元素
//         属性次作为出现的次数
// 
//  var countObj = {}  统计次数计数器对象
​
// 实现步骤:
//   1. 定义计数器对象
//   2. 遍历字符串
//   3. 判断对象中是否有属性，如果属性值加一, 如果没有给属性赋值为1    
var countObj = {} //1. 定义计数器对象
​
var str = 'abcdaefabcadefkmcmkggcc'
// 2. 遍历字符串
for (var i = 0; i < str.length; i++) {
     var chars = str.charAt(i) //获取字符 chars: a,b
​
//3. 判断对象中是否有属性，如果属性值加一, 如果没有给属性赋值为1
     if (countObj[chars]) {
         countObj[chars]++
      } else {
             countObj[chars] = 1
      }
}
console.log(countObj)
// 循环遍历countobj值显示到页面上  
</script>

2.判断字符串中出现次数最多的字符

<script>
var countObj = {} //1. 定义计数器对象
var str = 'abcdaefabcadefkmcmkggcc'
// 2. 遍历字符串
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i) 
//3. 判断对象中是否有属性，如果属性值加一, 如果没有给属性赋值为1
    if (countObj[chars]) {
        countObj[chars]++
    } else {
        countObj[chars] = 1
    }
}
console.log(countObj) 
var max = 0 //存储最大值
var maxChar //出现次数最多的字符
for(var key in countObj){
// document.write(key + ':' + countObj[key])
  document.write(`${key}:${countObj[key]} &nbsp;&nbsp;&nbsp;`)
  if(max < countObj[key]){
      max = countObj[key]
      maxChar = key
    }
}
console.log('最大次数 max :',max, ' 字符 :',maxChar)
</script>