JavaScript 字符串

创建字符串

创建字符串也分为两种方法 ： 字面量 和 构造函数

//字面量
       var str='hello'
       //构造函数
       var str =new String('hello')

两种方式创建的字符串没有区别，除了在控制台打印显示区别例外

字符串操作

字符串也有length属性 -> 表示字符串长度，也就是字符串中字符串个数

注：空字符也算一个字符

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

var str='helloworld'
console.log(str[1])
str[1]='z'
console.log(str[1])

for循环遍历字符串

包装数据类型

字符串、数值、布尔值是一个包装数据类型

当使用时会自动转换成复杂数据类型，使用完自动转回基本数据类型

使用点语句.toString

模板字符串

ES2015前，字符串拼接使用引号'',但在换行操作和输出变量值时不方便

ES2015后，字符串拼接使用反引号'',引用变量值时可以使用$（变量名）

var str = '<div><p></p><span></span><span></span></div>'


var str2 ='
 <div>
       <p>你好</p>
       <span>世界</span>
  </div>

案例

//方案一
 function test(){
        var students = [
        { number: 1001, name: 'jack', score: 98, gender: '男' },
        { number: 1002, name: 'rose', score: 95, gender: '女' },
        { number: 1003, name: '小丽', score: 85, gender: '女' },
        { number: 1004, name: 'tom', score: 88, gender: '男' },
        ]
        var newArr =students.map(function(item){
            return `
            <tr>
                <td>${item.number}</td>
                <td>${item.name}</td>
                <td>${item.score}</td>
                <td>${item.gender}</td>
            </tr>
            `
        }).join('')
        document.write('<table>'+newArr+'</table>')
    }
    test()
//方案二
 function fn(){
              var students=[
              {number:1001, name:'jack', score:98,gender:'男'},
              {number:1002, name:'rose',score:95,gender:'女'},
              {number:1003, name:'小丽', score:85,gender:'女'}
              ]
              var trStr=''
              students.forEach(function(item){
              trStr=trStr + `
              <tr>
                  <td>${item.number}</td>
                  <td>${item.name}</td>
                  <td>${item.score}</td>
                  <td>${item.gender}</td>
              </tr>
              `
              })
              var str ='<table>'+trStr+'</table>'
              document.write(str)
        }
        fn()

字符串的常用方法

我们操作字符串时，也有一堆的方法来帮助我们操作

字符串和数组有一个一样的地方，也是按照索引来排列的

//charAt(索引)  是找到字符串中指定索引位置的内容后返回
var str = 'jack'
//使用charAt  找到字符串中的某一个内容
var index = str.charAt(2)

console.log(index) //c

//因为字符串也是按照索引来排列的，也是同样从0开始
//所以索引2的位置就是c
//如果没有对应的索引，那么就会返回空字符串
var str = 'jack'
//使用charAt找到字符串中的某一个内容
var index =str.charAt(10)
console.log(index) // ''
//这个字符串根本没有索引到10的位置，所以就会返回一个空字符串''

indexOf&lastIndexOf

indexOf

          =>   返回字符在字符串中的下标

          =>   如果字符不存在返回-1

 lastIndexOf

          =>   查找从右往左，未找到返回-1

var str = 'jack'
//使用indexOf 找到对应的索引
var index=str.indexOf('j')
console.log(index)//0

substring

substring  对照 slice

          =>   从哪个索引开始，到哪个索引截止，但不包含截止到的索引

var str = 'hello'
//         01234
//使用substring 截取字符串
var newStr=str.substring(1,3)
console.log(newStr)//el

substr

substr    对照  splice

          =>   从索引开始，截取多少个

var str = 'hello'
//         01234
//使用substr 截取字符串
var newStr=str.substr(1,3)
console.log(newStr)//ell

replace

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

var str='abc'
var newStr=str.replace('a','b')
console.log(newStr)//bbc

split

           =>  分割字符串，将分割之后的字符存入数组返回

var str='javascript-html-css'
var arr=str.split('-')
console.log(arr)// {javascript,html,css}

concat

          =>   连接两个字符串，返回拼接的字符串

var str='hello'
var s1=str.concat('world')
console.log(s1)//helloworld

.trim()

          =>   方法删除字符串两端的空白符

          =>   返回去掉空格的新字符

startsWith()

          =>   判断字符串是否以子字符串开始  返回  true|false

          endsWith()

          =>   判断字符串是否以子字符串结束  返回  true|false

toLowerCase

          =>   大写转小写

           toUpperCase

          =>   小写转大写

var str=hello
//使用toUpperCase 转换成大写
var  upper = str.toUpperCase()
console.log(upper) //HELLO
//使用toLowerCase 转换成小写
var lower = upper.toLowerCase()
console.log(lower)//hello

案例:

反转字符串

 function testReverse(){
        var newStr=[]
       var str = 'abcdefg' // => gfedcba
       /* var str1=str.split('')
       str1.reverse()
       var str2=str1.join('')
       console.log(str2) */
       for(var i=str.length;i>=0;i--){
         var temp=str[i]
          newStr.push(str[i])
       }
       var newstr=newStr.join('')
       console.log(newstr)
       }
testReverse()

替换字符串

  function testReplace(){
       var str = 'abcedfdMMefallMMaefeafMMopqrst' // => abcedfd**efall**aefeaf**opqrst
       /* var newstr=str.replace('MM','**')
       var newstr1=newstr.replace('MM','**')
       var newstr2=newstr1.replace('MM','**')
       console.log(newstr2)
       } */
       var newstr=str.split('MM')
       var str1=newstr.join('**')
       console.log(str1)
    }
       testReplace()

字符串分割

function testSplit(){
       var str = 'javascript-html-css' // => ['javascript','css','html']
       var line=''
       var arr=[]
       for(var i=0;i<str.length;i++){
            var chars=str.charAt(i)
            if(chars !='-'){
                line=line + chars
            }else{
                if(line !=''){
                    arr.push(line)
                    line= ''
                }
            }
            if(i==str.length-1 && line !=''){
                arr.push(line)
                line= ''
            }
       }
        console.log(arr)// {javascript,html,css}
       }testSplit()
var str='javascript-html-css'
var arr=str.split('-')
console.log(arr)// {javascript,html,css}