1.search,indexOf

search 返回值的下标,没有返回-1,和indexOf类似

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <script>
  10.         /* search 返回值的下标,没有返回-1,和indexOf类似 */
  11.         var str = "你是谁";
  12.         var index = str.search("你");//0
  13.         console.log(index)
  14.         console.log(str.indexOf("他"))//-1
  15.     </script>
  16. </body>
  17. </html>

indexOf
字符串是否包含某位(多位)字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* 
        includes  字符串是否包含某位(多位)字符
         */
        var str ="hello";
        console.log(str.indexOf("h"))//0
        console.log(str.includes("eh"))//false
    </script>
</body>
</html>

2.match

match返回匹配的字符,返回一个数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* match返回匹配的字符,返回一个数组 */
        var str = "hello";
        var arr = str.match("l");
        console.log(arr);
    </script>
</body>
</html>

1.PNG

3.charAt

charAt(index) 输出某一位下标值的字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // charAt(index) 输出某一位下标值的字符
        var str = "hello";
        console.log(str.charAt(1))//e
    </script>
</body>
</html>

4.length

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var str = "hello";
        console.log(str.length)//5
        var s = "故事的结尾，心上人";
        console.log(handleStr(s))//故事的结尾...
        function handleStr(value){
            if(value.length > 5){
                return value.slice(0,5)+"..."
            }
            return value;
        }
    </script>
</body>
</html>

歌单查询

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id="txt">
    <script>
        /* 
        filter
        includes
        slice()
         */
        var arr = [
            {name:"你是谁,他在那里",id:1102},
            {name:"圈住你在那里",id:1102},
            {name:"hello在那里",id:1102},
            {name:"怪你",id:1102},
            {name:"world",id:1102},
        ]
        /* 1.enter回车获取关键字
           2.使用关键字,对数据查询,得到一个新的数组
           3.name的字符超过3位以...结尾
         */
         /* 1.enter回车获取关键字 */
        var txt = document.getElementById("txt");
        txt.onkeydown =  function(event){
            if(event.keyCode == 13){
                var value = this.value;
                /*  2.使用关键字,对数据查询,得到一个新的数组 */
                if(value){
                    // console.log(value)
                    var res = arr.filter(item=>{
                        return  item.name.includes(value);
                    })
                    /* 3.name的字符超过3位以...结尾 */
                    res.map(item=>{
                        if(item.name.length>3){
                            return item.name = item.name.slice(0,3)+"..."
                        }
                    })
                    console.log(res)
                }
            }
        }
    </script>
</body>
</html>