JavaScript的String知识汇总

JavaScript的String知识汇总

2018-07-01

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

字符串中常用方法
  • 单引号和双引号包裹的都是字符串 
    1
    2
    3
    4
    		 
    //-> 字符串是由多个字符组成的 以数字做为索引，重0开始
    var str = 'hello world'
    str[0] -> 'h'
    str[str.length-1] -> 'd'
Math常用的方法
  • 数学函数：他的对象数据类型是 object
  • Math对象给我们提供了很多操作数学的方法
  • console.dir(Math)查看所有方法
  • 经常用到的方法：如下 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    		 
     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

    1
    2
    		 
    [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：如果一个参数都不传，相当于把整个字符串都截取（字符串的克隆）

    1
    2
    3
    4
    		 
    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 获取指定字符串中最后一次出现的位置的索引 
    1
    2
    3
    4
    		 
    var str = 'hello world'
        console.log(str.indexOf('l'));//2
        console.log(str.lastIndexOf('l'))//0
        console.log(str.lastIndexOf('@'))//-1

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

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

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

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

  • split支持正则

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

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

1
2
3
 
var str__ = 'name张三name'
str__ = str__.replace('name','名字是');//名字是张三name
str__ = str__.replace('name','名字是')//名字是张三名字是
  • 如果有好几个都需要替换，在不适用正则的情况下我们需要多次执行replace

  • 有些需求即使执行很多次replace也实现不了，一般都是配合正则使用

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

  • trim() //去除字符串首尾空格

  • trimLeft() //去除字符串开始空格
  • trimRight() //去除字符串末尾空格
    案例：queryURLParameter

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    		 
    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拼接的字段名

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    		 
    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");

  • 封装

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    		 
    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()
随机验证码案例
  • 真实项目中的验证码一定是后台处理的，后台返回客户端展示的是一个图片（图片中包含了验证码） 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    		 
    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

根据条件截取字符串

1
2
3
4
5
 
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);
posted @ 2021-03-15 10:28  lianggl  阅读(31)  评论(0)    收藏  举报