JavaScript的String知识汇总

JavaScript的String知识汇总:包括基本操作，以及获取url参数的案例

字符串中常用方法

• 单引号和双引号包裹的都是字符串

  //-> 字符串是由多个字符组成的 以数字做为索引，重0开始
  var str = 'hello world'
  str[0] -> 'h'
  str[str.length-1] -> 'd'

  Math常用的方法

• 数学函数：他的对象数据类型是 object

• Math对象给我们提供了很多操作数学的方法

• console.dir(Math)查看所有方法

• 经常用到的方法：如下

   Math.abs()//取绝对值
   Math.ceil()//向上取整
   Math.floor()//向下取整
   Math.round()//四舍五入
  
   Math.random()//获取0-1之间的随机数
   //-> 封装循环strat到end之间的随机数
    function select(strat, end) {
        var total = end - strat + 1;
        return Math.floor(Math.random() * total + strat);
    }
  
   Math.max()//获得一组中的最大值
   Math.min()//获得一组中的最小值
   console.log(Math.min(2,4,3,6,3,8,0,1,3));//->0
  
   Math.PI()//获取圆周率
   Math.pow()//获取一个值的多少次幂
   Math.sqrt()/开平方
  //-> Math.sqrt(10，2) 100
  //-> Math.sqrt(100) 10

  常用的字符串方法

• console.dir(String.prototype)

  charAt && charCodeAt

  [str].charAt 返回指定位置索引的字符，和str[索引]的区别在于，
  当指定索引不存在的时候中括号获取的是undefined，charAt获取的是空字符串

• charCodeAt返回的是unicode编码值（对应ASCII码表）

• substr(n,m) 从索引n开始，截取m个字符

• substring(n,m) 从索引n开始，截取m索引处（不包括m本身）

• slice(n,m) 从索引n开始，截取到end位置，（不包括m本身支持负数）

• 细节1：如果只传了 n 就是截取字符串到末尾

• 细节2：如果超出最大限制，也是把能截取到的部分截取到即可

• 细节3：如果一个参数都不传，相当于把整个字符串都截取（字符串的克隆）

  var str = 'hello world'
  str.substr(2,6) //llo wo 截取6个字符
  str.substring(2,6)//llo  重索引2到索引6
  str.slice(-3,-2)//-> str.slice(str.length-3,str.length-2) 相当于8到9但不包括9 r

• str.toUpperCase() str转换为大写

• str.toLowerCase() str转换为小写

• str.indexOf() 获取指定字符串中第一次出现的位置的索引

• str.lastIndexOf 获取指定字符串中最后一次出现的位置的索引

  var str = 'hello world'
      console.log(str.indexOf('l'));//2
      console.log(str.lastIndexOf('l'))//0
      console.log(str.lastIndexOf('@'))//-1

  如果当前字符串中没有出现过，返回-1，我们可以根据这个规律验证当前字符串是否包含某个字符

if(str.indexOf('?') === -1){
     //没有出现过
}

• split(“”) 字符串转换成数组 引号里确定用什么分割 和join()是对应的

  var happyList = 'music|movie|eating'
  happyList.split('|')
  //-> ["music", "movie", "eating"]
  console.log(happyList.split('@'));
   //->["music|movie|eating"] 如果找不到的话会默认后边有一个@

• split支持正则

  var str_ = 'name=李四&张三&age=8'
  str_.split(/=|&/g);
  // ["name", "李四", "张三", "age", "8"]

• replace(searchValue, replaceValue) 字符串替换 如果出现多次的话只能替换一次

var str__ = 'name张三name'
str__ = str__.replace('name','名字是');//名字是张三name
str__ = str__.replace('name','名字是')//名字是张三名字是

• 如果有好几个都需要替换，在不适用正则的情况下我们需要多次执行replace
• 有些需求即使执行很多次replace也实现不了，一般都是配合正则使用

  str__.replace(/name/g, '名字是')

• trim() //去除字符串首尾空格
• trimLeft() //去除字符串开始空格
• trimRight() //去除字符串末尾空格

  案例：queryURLParameter

• 获取地址栏中URL地址问号传递的参数值

  var str = 'https://www.baidu.com/s?wd=node&rsv_spt=1&rsv_iqid=0'
  
  function queryURLParameter(url){
         var obj = {}
         var questionIndex = url.indexOf('?')
         if(questionIndex === -1){//url没有问号传参
             return obj;
         }
         //重问号后边开始截取
         url = url.substring(questionIndex + 1)
         var ary = url.split('&')
         for (var i = 0; i < ary.length; i++) {
             var cur = ary[i];
             var curAry = cur.split('=')
             var key = curAry[0]
             var value = curAry[1]
             obj[key] = value
         }
         return obj;
     }
     var parame = queryURLParameter(url);
     var rsv_spt = parame.rsv_spt;//参数

• 直接输入想要获取url拼接的字段名

  var name = window.location.href;
  	// 截取地址栏中url的参数值
  	function getQueryString(name) {
  		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  		var r = window.location.search.substr(1).match(reg);
  		if (r != null)
  			return unescape(r[2]);
  		return null;
  	}
  	var gongdidm = getQueryString("gongdidm");

• 封装

  String.prototype.URLParameter = function URLParameter(){
      var obj = {};
      var reg = /([^=?&]+)=([^=?&]+)/g;
      this.replace(reg,function ( ){
          var arg = arguments;
          console.log(arg);
          obj[arg[1]] = arg[2]
      })
      return obj;
  }
  url.URLParameter()

  随机验证码案例

• 真实项目中的验证码一定是后台处理的，后台返回客户端展示的是一个图片（图片中包含了验证码）

  var codeBox = document.querySelector('.codeBox')
      //生成随机4位验证码 取值范围
      var areaStr = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
      var result ='';
      for (var i = 0; i < 4; i++) {
          //随机获取一个0-61之间的整数，做为接下来获取字符串的一个索引
          var ran = Math.round(Math.random()*61)
          //根据索引获取一个随机字符
          var char = areaStr.charAt(ran)
          //把每一次循环获取的字符存放在最后结果中
          result += char;
      }
      codeBox.innerHTML = result

  根据条件截取字符串

  var str = "bridge:123456"; //根据冒号截取字符串
  var index = str.indexOf(':');
  var key = str.substr(0,index);
  var value = str.substr(index + 1,str.length);
  console.log(key,value);

赏

谢谢你请我吃糖果

支付宝

微信