JS字符串

基本包装类型

  • 为了方便操作简单数据类型，JavaScript还提供了三个特殊的简单类型类型：String/Number/Boolean

  • 实际上，每当读取一个基本类型值的时候，后台就会创建一个对应的基本包装类型的对象，从而让我们能够调用一些方法来操作这些数据

    var s1 = "some text";
var s2 = s1.substring(2);

//以上过程分为三步
//1.创建 String 类型的一个实例；
//2.在实例上调用指定的方法；
//3.销毁这个实例。

var s1 = new String("some text");
var s2 = s1.substring(2);
s1 = null;


// 为什么我们不能给基本类型扩展属性或方法
var str = "1234444";
str.name = "hello";
// 解析如下：
var _str = new String("1234444");
_str.name = "hello";
_str = null;

concat方法

  • 使用字符串的concat的方法可以把多个参数添加到指定字符串的尾部
  • 参数类型和个数没有限制，把所有参数转换为字符串，返回连接以后的字符串
  • 特定情况下，可以使用加法 和 数组的join 拼接字符串
  • 原本数组的join方法代替concat方法，速度很快。但是当代浏览器优化加号拼接。所以推荐使用加号拼接
var str = "hello";
var _str = str.concat("world","oh");
console.log(str);//hello
console.log(_str);//helloworldoh


var str2 = "hello";
var _str2 = str.concat("world",['oh','nice'],{name:"laowang"});
console.log(str2);//hello
console.log(_str2);//helloworldoh,nice[object Object]


var straLL = "0123456789abcdefghijklmnopqrstuvwxyz";
var strArr = [];
for (var i = 0; i < 20; i++) {
    var strNum = Math.floor(Math.random() * straLL.length)
    strArr.push(straLL[strNum]);
}
var finallyStr = strArr.join("");
console.log(finallyStr);

字符串查找

  • charAt(n) 返回字符串中的第n个字符，参数如果不是0 --- length-1 之间，则返回空字符串
  • indexOf和lastIndexOf：可以根据参数字符串，返回指定子字符串的下标位置。 两个方法都有两个参数，第一个参数查找的目标，第二个参数是起始位置
  • search 方法于indexOf的功能是相同的，查找指定字符串第一次出现的位置，但是只有一个参数，定义匹配模式，没有反向检索和全局模式。
  • macth方法能够找出所有匹配的子字符串，并以数组的形式返回，如果匹配模式没有指定全局，则进行1次匹配。如果没找到则返回null
// 01.charAt
var str = "hello i am fine thankyou";
console.log(str.charAt(8));//a
console.log(str.charAt(0));//a
console.log(str.charAt(str.length));//空字符串

//02.indexOf()和lastIndexOf()
var str = "hello i am fine thankyou";
console.log(str.indexOf("a"));//8
console.log(str.lastIndexOf("a"));//18
console.log(str.indexOf("a",9));//18
console.log(str.lastIndexOf("a",5));//-1  倒着查  5是下标

// 03.search();
var str = "110p1101h110";
var index1 = str.search(/[a-zA-Z]/g);
console.log(index1);

// 04.match()
var str = "110p1101h110";
var index2 = str.match(/[a-zA-Z]/g);
console.log(index2);//["p","h"]

字符串截取

  • substr方法：substr能够根据指定长度来截取子字符串。包含两个参数，一个是起始下标，一个是截取的长度。省略第二个参数则代表末尾（ECMA不再推荐该方法）
  • slice和substring方法都是根据指定的起止下标来截取字符串的，包含两个参数，一个是开始下标，一个是结束下标（不包含），第二个参数省略则代表末尾
  • 起始和结束位置相比较的大小无法确定的时候可以使用substring。
  • 如果为负值，slice能把负值当作从右向左。而substring视其无效
var str = "today is a fine day";
var _str = str.substr(4,5);
console.log(str);//today is a fine day
console.log(_str);//y is
var _str = str.substr(4);
console.log(_str);//y is a fine day


var str2 = "today is a fine day";
var _str2 = str2.substring(4,8);
console.log(str2);//today is a fine day
console.log(_str2);//y is
var _str2 = str2.substring(4);
console.log(_str2);//y is a fine day

var str3 = "today is a fine day";
var _str3 = str3.slice(4,8);
console.log(str3);//today is a fine day
console.log(_str3);//y is
var _str3 = str3.slice(4);
console.log(_str3);//y is a fine day


var str3 = "today is a fine day";
var _str3 = str3.slice(4,-11);
console.log(str3);//today is a fine day
console.log(_str3);//y is a

var str2 = "today is a fine day";
var _str2 = str2.substring(4,-1);
console.log(str2);//today is a fine day
console.log(_str2);//toda

字符串大小转换

  • toLowerCase():将字符串转换成小写
  • toUpperCase():将字符串转换成大写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串的大小写转换</title>
    <style>
        #ipt{
            width: 200px;
            height: 50px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
<div id="outer">
    请输入验证码：
    <input type="text" id="ipt">
    <button id="con">hj76tr</button>
</div>
<script>
    /*
    *   toLowerCase() 转成小写字母
    *   toUpperCase() 转成大写字母
    * */
    var oCon = document.getElementById("con");
    var oIpt = document.getElementById("ipt");

    oIpt.onchange = function () {
        if (oIpt.value.toLowerCase() === oCon.innerHTML) {
            oIpt.style.borderColor = "green";
        }
    }
</script>
</body>
</html>

字符串与数组转换

  • 使用字符串的split方法可以根据指定的分割符把字符串切分成数组
  • 如果参数是空字符串，则按照单个字符切分，返回和字符串等长的数组
  • 如果没有参数，则把字符串当作返回数组的一个值
  • 支持第二个参数，代表数组的最大长度 
    var str = "哎,呦,不,错,哦";
var arr = str.split();
var arr2 = str.split('');
var arr3 = str.split(',');
var arr4 = str.split(',',3);
console.log(str);
console.log(arr);//["哎,呦,不,错,哦"]
console.log(arr2);// ["哎", ",", "呦", ",", "不", ",", "错", ",", "哦"]
console.log(arr3);//["哎", "呦", "不", "错", "哦"]
console.log(arr4);// ["哎", "呦", "不"]

清除两侧空字符串

  • ES5新增了trim方法，用以从字符串中移除前导空字符和尾部空字符和行行终止符
  • 常用在表单
var str1 = "   kajsbd  asknj df asf adf  \n";
console.log(str1.trim());

将字符串转换成对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将字符串转换成对象</title>
</head>
<body>
<script>
    // http://www.baidu.com?username=xiaowang&password=12345&age=18&sex=女&score=90
    // {username:"xiaowang",password:12345,age:18,sex:"女",score:90}

    var url = "http://www.baidu.com?username=xiaowang&password=12345&age=18&sex=女&score=90";
    var obj = {};
    var strArr = url.split("?");
    // console.log(strArr[1]);//username=xiaowang&password=12345&age=18&sex=女&score=90
    var strArr2 = strArr[1].split("&");
    // console.log(strArr2);//["username=xiaowang", "password=12345", "age=18", "sex=女", "score=90"]
    for (var i = 0; i < strArr2.length; i++) {
        // strArr2[i].split("=")//["username","xiaowang"]
        obj[strArr2[i].split("=")[0]] = strArr2[i].split("=")[1];
    }
    console.log(obj);//{username: "xiaowang", password: "12345", age: "18", sex: "女", score: "90"}



    // var str = 'username=xiaowang&password=12345&age=18&sex=女&score=90'
    function queryString(str) {
        var obj = {};
        var strArr2 = str.split("&");
        for (var i = 0; i < strArr2.length; i++) {
            obj [ strArr2[i].split("=")[0] ] = strArr2[i].split("=")[1];
        }
        return obj;
    }
</script>
</body>
</html>

对象转字符串

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将对象转换成字符串</title>
</head>
<body>
<script>
    // 已知我们得到的对象是：{username: "xiaowang", password: "12345", age: "18", sex: "女", score: "90"}
    // 已知被拼接的url地址是：http://www.baidu.com
    // 最终得到：http://www.baidu.com?username=xiaowang&password=12345&age=18&sex=女&score=90

    var obj = {username: "xiaowang", password: "12345", age: "18", sex: "女", score: "90"};
    var url = "http://www.baidu.com";

    // 第一个目标：["username=xiaowang", "password=12345", "age=18", "sex=女", "score=90"]
    var arr = [];
    for(var i in obj){
        var str = i + "=" + obj[i];
        // console.log(str);//username=xiaowang
        arr.push(str);
    }
    // console.log(arr); //["username=xiaowang", "password=12345", "age=18", "sex=女", "score=90"]

    // 第二个目标：username=xiaowang&password=12345&age=18&sex=女&score=90

    var newStr = arr.join("&");
    console.log(newStr);

    var newUrl = url + "?" + newStr;
    console.log(newUrl);
</script>
</body>
</html>
posted @   z_bky  阅读(29)  评论(0)  编辑  收藏  举报
相关博文：
·  字符串的扩展
·  JS数据类型
·  12.包装类和字符串
·  前端开发系列004-基础篇之JavaScript的字符串
·  Js-字符串
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae