js-字符串

Posted 2022-12-01 ……勇敢妞妞

字符和字符串的创建

字符串 获取和设置一段文本

创建字符串的方式:
(1) 字面量创建 => 快捷创建
(2) 构造函数创建

 var str = "hello";
    console.log(str, typeof str);    // "string"

   var str = new String("hello");
    console.log(str, typeof str);    // "object"

字符串的特性 (对比数组)
1. 有length属性 表长度(字符的个数)
2. 可以通过下标取值,但是不能通过下标赋值(特性,官方规定) => 字符串的方法都不会影响原字符串
3. 可以被循环遍历

 // 下标取值
    // var char = str[4];
    // var char = str[100];
    // console.log(char);

    // 下标赋值   (失败)
    // str[4] = "O";
    // console.log(str);

    //循环遍历
    // for (var i = 0; i < str.length; i++) 
    //     var char = str[i];
    //     console.log(char);
    // 

    // for (var i in str) 
    //     console.log(i);
    // 

---

“”,’'里的字符串不能换行，解决办法：1.不换行2.改为字符串拼接的形式3.ES6模板字符串(反引号)
解决办法：
1.不换行2.改为字符串拼接的形式3.ES6模板字符串(反引号)

模板字符串（反引号）+插值语句$goodsprice

// 传统的字符串拼接(ES5)  多字符串拼接
        // html += '<li>' +
        //     '<a href="">' +
        //     '<img src="' + goodsImg + '" alt="">' +
        //     '</a>' +
        //     '<p class="info">' + goodsMsg + '</p>' +
        //     '<p class="price">￥<span>' + goodsPrice + '</span> </p>' +
        //     '</li>';

        // 模板字符串(``   ES6)   => 配合插值语句 拼接变量
        html += `<li>
            <a href="">
                <img src="$goodsImg"
                    alt="">
            </a>
            <p class="info">$goodsMsg</p>
            <p class="price">￥<span>$goodsPrice</span> </p>
        </li>`;

---

字符串的拓展方法
for in 下标
for of 值
includes
indexOf
charAt（下标） 返回对应下标的字符，取不到就返回空字符串

var str=new String("hello world");
var char = str[4];
var char = str[100];//undefined
console.log(char);

var char = str.charAt(4);
var char = str.charAt(100);//空字符串
console.log(char);

charCodeAt(下标) 返回对应下标字符的编码 ASCII编码值

var code = str.charCodeAt(4);  // "o" =>  111
var code = str.charCodeAt(6);  // "w" =>  119
console.log(code);

string函数构建方法 String.fromCharCode()
String.fromCharCode()传一个或多个字符编码

 var str = String.fromCharCode(104, 101, 108, 108, 111);
 console.log(str);//hello

indexOf（char）返回某个或某段字符在字符串中第一次出现的位置
indexOf（char，startIndex）也可以接收第二参数作为起始下标
返回值：存在=>下标
不存在=>-1

var str = "good good study , day day up";
var index = str.indexOf("d");  // 3
var index = str.indexOf("day"); //18   如果是一段字符,默认返回该段字符第一个字符的下标
console.log(index);

var index = str.indexOf("d", 4);  // 8，从下标4的位置开始找，d出现在8位置
var index = str.indexOf("day", 19); // 22
console.log(index);

LastIndexOf（char）返回某个或某段字符在字符串中最后一次出现的位置
LastIndexOf（char，startIndex）也可以接收第二参数作为起始下标
返回值：存在=>下标
不存在=>-1

var str = "good good study , day day up";
var index = str.lastIndexOf("d");     //   22
var index = str.lastIndexOf("good");  //   5
console.log(index);

var index = str.lastIndexOf("d", 21);     //   18
var index = str.lastIndexOf("good", 4);  //   0
console.log(index);  

concat() 字符串拼接
返回拼接后的新字符串

 var str1 = "good";
    var str2 = "good";
    var str3 = "study";
    // var str = str1.concat(" ", str2, " ", str3);
    str = str1 + " " + str2 + " " + str3;
    console.log(str);

字符串裁切 slice() substring() substr()
包含起始下标，但不包含终止下标
slice(startIndex=0,endIndex=length) 字符串裁切 [startIndex,endIndex)

  slice()  也可以接收负数作为参数  (str.length - n)
    var str = "good good study , day day up";
    // var str1 = str.slice(10, 15);
    // var str1 = str.slice(22, 25);
    
    // 了解
    var str1 = str.slice(-6, -3);  // -6 => str.length-6  -3=> str.length-3 =>25
    console.log(str1);//day

    // substring(startIndex,endIndex)  用法同slice() 但是不能接收负值
    var str1 = str.substring(10, 15);//study
    var str1 = str.substring();//good good study , day day up
    console.log(str1);

    // substr(startIndex,length)     字符串裁切
    // startIndex 起始下标(默认 0 )
    // length     裁切的长度 (str.length - startIndex)
    var str = "good good study , day day up";
    var str1 = str.substr(10, 5);//study
    var str1 = str.substr(10);//study , day day up
    console.log(str1);

toUpperCase() 字母转大写
toLowerCase() 字母转小写

 var str = "Good Good Study , Day Day Up 123123123 +-*/%";
 var newStr = str.toUpperCase();//GOOD GOOD STUDY , DAY DAY UP 123123123 +-*/%
 // var newStr = str.toLowerCase();//good good study , day day up 123123123 +-*/%
 console.log(newStr);

join() 数组转字符串(用特定的字符将数组拼接形成字符串)

  var arr = ["a", "b", "c", "d"];
    var str = arr.join("-");
    console.log(str);   // "a-b-c-d"

split() 字符串拆分数组(用特定的字符将字符串拆分形成数组)

 var brr = str.split("-");
    var brr = str.split("");
    console.log(brr);

trim() 去除首尾空格

<body>
    <input id="content" type="text">
    <button id="btn">点击</button>
</body>
<script>
    var contentInp = document.getElementById("content");
    var btn = document.getElementById("btn");

    // 聚焦事件
    // contentInp.onfocus = function () 
    //     console.log("聚焦");
    // 

    // // 失焦事件
    // contentInp.onblur = function ()    // 用户名注册去空格
    //     console.log("失焦");
    //     var con = contentInp.value.trim();
    //     contentInp.value = con;
    // 

    btn.onclick = function ()    // 弹幕发送
        var con = contentInp.value;
        console.log(1, con);
        con = con.trim();//去除输入框的首尾空格
        console.log(1, con);
    
</script>

search 查找某个或某段字符第一次出现的位置

 //普通用法   查找某个或某段字符第一次出现的位置
    var str = "good good study , day day up";
    var index = str.search("d"); // 3
    var index = str.search("day"); //18
    console.log(index);

    //配合正则表达式使用  查找符合规则的某个或某段字符第一次出现的位置
    var str = "good good study , Day dAy up";
    var reg = /day/i;  // D|d A|a Y|y
    var index = str.search(reg);

    console.log(index);

match 将匹配的内容（某个或每段字符）放入数组
返回值：有=>数组 没有=>null
//普通用法 将匹配的内容(某个或某段字符)存入数组 (默认值找一个)

 var str = "good good study , day day up";
    var arr = str.match("day");
    console.log(arr);

//配合正则表达式使用 将匹配的内容(符合规则的某个或某段字符)存入数组 (默认值找一个)

  var str = "good good study , Day dAy up";
    var reg = /day/i;  //  i忽略大小写   (默认只找一个)
    var reg = /day/ig;  // i忽略大小写  g全局匹配(匹配整个字符串)
    var arr = str.match(reg);
    console.log(arr);