js String基础

深碍√TFBOYSˉ_ 2023-07-03 12:26 4阅读 0赞

## String ##

### 定义赋值方法 ###

var srt0="abc";
    var str1 = 'abc';
    var str2 = `abc`;
    console.log(srt0 === str1,str1 === str2, typeof str1);   //true true "string"

### 创建 ###

1、String（）创建，转化为字符串类型
    var str0=String("abc");//存在栈中
    var str4=String("abc");//存在栈中
    console.log(str0===str4,typeof str0);//true "string" 相等 
    
    2、构造函数创建new String（）
    var str1=new String("abc");//字符型对象，存在堆中的
    var str2=new String("abc");//字符型对象，存在堆中的
    console.log(str0===str1,typeof str1);//false "object" 不相等 
    console.log(str2===str1,typeof str2);//false "object" 不相等

### 通过字符串下标获取元素 ###

1.  获取字符串的下标是0的字符  
    console.log(str\[0\]);  
    str\[0\] 只读，不能设置值，亦不能修改值。

var str="abcdefg";
    console.log(str[0]);  //a
    str[0]="aaa";
    console.log(str[0]);  //a 无法修改str[0]的值

### 字符串长度 ###

1.  srt.length  
    获取字符串字符个数，只读，只能获取，不能修改。
2.  示例：将字符串内容反转

var str="abcdefg";
    var len=str.length;
    var str1="";
    while(len>0){ 
        str1+=str[len-1];
        len--;
    }
    console.log(str1); //gfedcba

### 字符串常用方法 ###

##### 1、鸡肋方法：concat( ) ,常用字符串相加替代。 #####

str.concat(); //连接字符串

var str="abcdefg";
    var str1=str.concat("000");  //concat连接字符串
    var str2=str+"000";   //字符串直接相加
    str+="000";
    console.log(str,str1,str2); //abcdefg000 结果都一样
    
    //举个小栗子
    var age=15;
    var str3="今年小明"+age+"岁了";
    var str4="今年小明".concat(age,"岁了。");
    console.log(str3,str4); //今年小明15岁了。 结果都一样

##### 2、charAt( ) #####

str.charAt(); //获取字符，从0~length-1，默认下标为0 。

var str = "abcdefg";
    console.log(str.charAt());  //a 默认str[0];
    console.log(str.charAt(0));  //a str[0];
    console.log(str.charAt(1));  //b str[1];
    console.log(str.charAt(str.length-1));  //g 最后一个

##### 3、indexOf( ) 、LaseIndexOf() #####

[JavaScript indexOf() 方法][JavaScript indexOf_]  
查找出现的下标。  
str.indexOf();  
str.LaseIndexOf();

var str = "abcbdebbfgb";
    console.log(str.indexOf("b")); //1
    console.log(str.lastIndexOf("b")); //10

##### 4、slice( ) #####

截取字符串内容，不改变原字符串。  
str.slice(起始下标，截取到该下标之前);  
console.log(str.slice(0, 3)); //abc 截取赋值0，3之前

1、随机获取颜色rgb值
    
    function randomColor() { 
        var color = "rgb(";
        for (var i = 0; i < 3; i++) { 
            color += Math.floor(Math.random() * 256) + ",";
        }
        color = color.slice(0, -1) + ")"; //截取到最后一个字符之前，把最后一个","去掉
        return color;
    }
    console.log(randomColor()); //rgb(239,250,234) 随机得来的rgb值，每次不一样

##### 5、charCodeAt( ) 、fromCharCode( ) #####

*  求字符串的对应下标字符的Unicode编码  
    str.charCodeAt();
 *  将unicode编码转换为字符  
    str.fromCharCode();

1、字符--->Unicode编码
    var str = "林灵";
    console.log("\\u" + str.charCodeAt(0).toString(16)); //\u6797
    console.log("\u6797","\u7075"); //林 灵
    
    2、Unicode编码--->字符
    console.log(String.fromCharCode(97)); //a

*  示例1：0~ 9 、A ~ Z、 a ~ z 乱序打印

1、用数组
    var arr = [];
    for (var i = 48; i < 123; i++) { 
        if (i > 57 && i < 65) continue;
        if (i > 90 && i < 97) continue;
        arr.push(String.fromCharCode(i));
    }
    // console.log(arr); //正序打印
    var arr1=[];
    while(arr.length>0){ 
        var n=Math.floor(Math.random()*arr.length);  //扩大随机范围
        arr1.push(arr.splice(n,1)[0]);  //将第n个数提取出来，原数组改变
    }
    console.log(arr1); //乱序打印
    
    2、用数组的sort方法来打乱顺序
    var arr = [];
    for (var i = 48; i < 123; i++) { 
        if (i > 57 && i < 65) continue;
        if (i > 90 && i < 97) continue;
        arr.push(String.fromCharCode(i));
    }
    arr.sort(function(){ 
        return Math.random()-0.5; //乱的比较彻底
    });
    console.log(arr);

*  示例2：验证码，择取前四个，保证是无重复

3、用数组，sort排序，length===4
    function getStr() { 
    	var arr = [];
    	for (var i = 48; i < 123; i++) { 
    	    if (i > 57 && i < 65) continue;
    	    if (i > 90 && i < 97) continue;
    	    arr.push(String.fromCharCode(i));
    	}
    	 arr.sort(function(){ 
    	     return Math.random()-0.5;
    	 });
    	 arr.length=4;
    	 return arr.join(""); //转化为字符串，以空字符分开
    }
    console.log(getStr()); //随意四个字符
    
    4、用字符串
    function getStr() { 
    	var arr = [];
    	for (var i = 48; i < 123; i++) { 
    	    if (i > 57 && i < 65) continue;
    	    if (i > 90 && i < 97) continue;
    	    arr.push(String.fromCharCode(i));
    	}
    	var str = "";
    	while (str.length < 4) { 
    	    var s = Math.floor(Math.random() * arr.length);
    	    console.log(str.indexOf(arr[s]));
    	    if (str.indexOf(arr[s]) > -1) continue; //避免字符重复
    	    str += arr[s];
    	}
    	return str;
    }
    console.log(getStr());

### 正则中使用的方法 ###

##### 6、search( ) 、match( ) #####

*  用于正则，字符的查找。

var str = "abcdefg";
    console.log(str.search("a")); // 0 查找下标
    console.log(str.match("a")); 
    //["a", index: 0, input: "abcdefg", groups: undefined] 查找

##### 7、replace(要查找的值，要替换的值或回调函数) #####

*  str.replace(要查找的值，要替换的值或回调函数)；  
    替换字符串中指定的内容，返回被替换后的字符串，原字符串**不改变**，仅能替换第一个被查找到的元素。

console.log(str.replace("a","z"));  //zbcdefg

##### 8、substring(第几个开始截取，截取到哪里) #####

*  str.substring(第几个开始截取，截取到哪里);
 *  截取 ， 不允许使用负数（负数就是0前面的，就是0），可以反向截取。

console.log(str.substring(0,4));  //abcd
    console.log(str.substring(4,0));  //abcd

##### 9、substr(从什么位置开始，截取字符串的长度) #####

*  从什么位置开始，可以使用负数；
 *  截取字符串的长度，不能为负数， 如果没有给长度，默认截取到尾部。
 *  可以截取固定长度的字符串。
 *  不改变原数组。

var str="abcdefgh";
    console.log(str.substr(-6)); //从倒数第6个开始截取
    console.log(str);  //abcdefgh
    
    //截取信息内容
    var str = "skyLove@163.com";
    console.log(str.substring(str.indexOf("@") + 1)); //截取邮箱类型

##### 10、split( ) #####

*  切割，将字符串**以某符号**切割**返回成数组**。

1、基础
    var str = "a#b#c#d#e";
    console.log(str.split("#"));//将字符串以什么符号切割成数组
    
    2、反转字符串
    console.log(str.split("").reverse().join(""));  //e#d#c#b#a
    
    3、切割，分离邮箱类型
    var str = "skyLove@163.com";
    console.log(str.split("@")[1]);  //163.com
    
    4、大小写转换
    console.log(str.toUpperCase()); //SKYLOVE@163.COM 转换成大写
    console.log(str[0].toUpperCase() + str.slice(1)); //SkyLove@163.com 首字母转换成大写
    console.log(str.toLowerCase()); //skylove@163.com 转换为小写字母

（注意：用split可以来解析地址请求，详情请看 “js 地址请求解析” 这篇文章。[https://blog.csdn.net/weixin\_43297321/article/details/104212476][https_blog.csdn.net_weixin_43297321_article_details_104212476]）

[JavaScript indexOf_]: https://www.runoob.com/jsref/jsref-indexof.html
[https_blog.csdn.net_weixin_43297321_article_details_104212476]: https://blog.csdn.net/weixin_43297321/article/details/104212476