字符串使用方法大全

123 阅读4分钟

字符串

引号包裹的内容就是字符串
单引号'';双引号""; 反引号``;  反引号的字符串也叫做 模板字符串(ES6新)

以前的创建:字符串方式都是通过字面量      
新的创建方式:通过内置构造函数
     
包装类型
    字符串在正常查询使用的时候, 就是引号包裹起来的内容
    但是如果想要使用字符串上的方法, JS 内部会先将字符串包装为一个字符串对象,
    这个对象上有一些方法, 使用完毕后, 将字符串对象恢复为普通对象

创建字符串

  • 字面量

      var str1 = 'hhhh'
      var str2 = "zzz"
      var str3 = `asd`       
    
  • 构造函数创建

      var str4 = new String()
      var str5 = new String('qwe')
    
字符串也是有length与下标的
length 长度
索引(下标): 获取到字符串中指定位置的值  但是!只读
一些操作字符串的常用方法
  • charAt / charCodeAt / toLowerCase / toUpperCase
  1. charAt

    语法: 字符串.charAt(索引)
    作用: 查询指定下标的值
    返回值: 查询到的值, 没有查询到就是一个 空字符串
    

image.png

  1. charCodeAt

    语法: 字符串.charCodeAt(索引)
    作用: 查询指定下标的值 对应的 十进制码
    返回值:   查询到的值对应的十进制码, 没有查询到就是 NaN
    

image.png

  1. toLowerCase

    语法: 字符串.toLowerCase()
    作用: 将字符串转换为小写
    返回值: 转换后的字符
    

image.png

  1. toUpperCase

    语法: 字符串.toUpperCase()
    作用: 将字符串转换为大写
    返回值: 转换后的字符
    

image.png

  • substr / substring / slice
  1. substr
> MDN 说明 这个方法将来的某一天可能会删除, 

> MDN 推荐使用 substring
   语法: 字符串.substr(开始索引, 多少个)
   作用: 截取指定字符串
   返回值: 截取到的字符串

image.png

  1. substring

    语法: 字符串.substring(开始下标, 结束下标)    参数包前不包后
    结束下标不传, 相当于写了 length
    作用: 截取指定字符串
    返回值: 截取到的字符串
    

image.png

image.png

  1. slice

    语法: 字符串.slice(开始下标, 结束下标)    参数包前不包后
    结束下标不传, 相当于写了 length
    开始下标不传, 相当于写了 0
    作用: 截取指定字符串
    返回值: 截取到的字符串
    

image.png


  • concat / indexOf / lastIndexOf / split
  1. concat

    语法: 字符串.concat(数据1, 数据2, 数据3)
    作用: 将字符串和  参数传递的数据  拼接
    返回值: 拼接后的字符串
    

image.png

  1. indexOf

     语法: 字符串.indexOf(数据, 开始下标)
     作用: 寻找数据在字符串中的位置
     返回值: 找到的时候返回下标, 找不到返回 -1
    

image.png

  1. lastIndexOf

     语法: 字符串.lastIndexOf(数据, 开始下标)
     作用: 寻找数据在字符串中出现的位置(倒叙查找)
     返回值: 找到返回下标, 找不到返回 -1
    

image.png

  1. split

     语法: 字符串.split('符号')
     参数如果传递的是 空字符串, 会将字符串全部分隔开
     作用: 在 字符串中找到分隔符, 将其分割, 并放置到数组中
     返回值: 数组形式的
    

image.png


  • trim / trimStart(trimLeft) / trimEnd(trimRight)
  1. trim

     语法: 字符串.trim()
     作用: 去掉字符串两侧的空格
     返回值: 将去掉空格的字符串返回
     
     
    

image.png

  1. trimStart ---> trimLeft()

     语法: 字符串.trimStart()
     作用: 去掉字符串左侧(开始位置)的空格
     返回值: 将去掉空格的字符串返回
     
     
    

image.png

  1. trimEnd ---> trimRight()

     语法: 字符串.trimEnd()
     作用: 去掉字符串右侧(结束位置)的空格
     返回值: 将去掉空格的字符串返回
             
    

image.png


  • includes / startsWith / endsWith / repalce
  1. includes

     语法: 字符串.includes(字符串片段)
     作用: 判断 当前字符串中  是否拥有 指定字符串 片段
     返回值: true ---> 拥有;   false ---> 没有
    

image.png

  1. startsWith

     语法: 字符串.startsWith('字符串片段')
     作用: 查询字符串开头是不是 指定的 字符串片段
     返回值: true: 是开头;     false: 不是开头
    

image.png

  1. endsWith

     语法: 字符串.endsWith('字符串片段')
     作用: 查询字符串结尾是不是 指定的 字符串片段
     返回值: true: 是结尾;     false: 不是结尾
    

image.png

  1. replace

     语法: 字符串.replace('要被替换的字符', '替换的字符')
     作用: 找到当前字符串中第一个参数对应的值, 然后将其替换为 第二个参数传入的数据
     返回值: 替换完成的字符串
    

image.png


查询字符串
  • 查询字符串 (约定)

      数字字符串 '1234567'
      标签字符串  '<div></div>'
    
  • 查询字符串:

      'key=value'
    
  • 多个查询字符串

      'key=value;key1=value1;key2=value2'