【Python全栈-JavaScript】JavaScript-字符串详解

JavaScript-字符串详解

预热：Number() 方法

<script>
        //重要等级 1,2,3,4,5
        var s=10;
        //最高级别5
        var s1=new Number(10);//构造函数创建的数值对象
        console.log(s===s1);//false
        console.log(s1/2);//5;
        console.log(s1);
        console.log(typeof s1);//object

        //
        console.log(Number.MAX_VALUE);//js能表示的最大数
        console.log(Number.MIN_VALUE);  //小数点后324位
        console.log(Number.NEGATIVE_INFINITY);//负无穷
        console.log(Number.POSITIVE_INFINITY);//正无穷

//        Number.NaN和NaN相同
//
//        记住： NaN!==NaN

        var s2=13;
        s2.toString(16);//
        s2.toFixed(2);//
        //
        console.log(s2.toExponential(2));   //2是小数点后几位,用科学计数法表示,转换字符串
        console.log(s2.toPrecision(2)); //2是数字是几位,用科学计数法表示(如果刚好如13 就表示为13,不需要是科学计数法),转换字符串
    </script>

Number()方法

一、String的方法

二、String类型

<script>
    //
    var str = new String("b");    //通过构造方法定义的str 类型是object
    str = str + 2;    //运算法则使str自动转换字符型
    console.log(typeof str);    //string

    //
    var str1 = "abc";
    console.log(str1[1]);
    str1[0] = "d";    //字符串可以通过[索引值]获取这个位置字符,但是不能设置这个位置的字符
    console.log(str1);

    console.log(str1.length);
    //            str1.length=2;    //字符串的length不可修改,只能获取。数组可以修改获取前n个

    //反转字符串
    function stringReverse(str) {
        var str1 = "";
        for (var i = str.length - 1; i >= 0; i--) {
            str1 += str[i];
        }
        return str1;
    }

    console.log(stringReverse("abcdef"));
</script>

三、字符串编码与合并

charAt

charCodeAt

fromCharCode

concat

<script>
        var str="abcde";
//        str[1]
        str.charAt(1);  //与str[1]等同   5
        str.charCodeAt(1);  //98 获取字符串中指定索引位unicode编码      2
//        console.log(str.charCodeAt(0));   //97
        String.fromCharCode(97);    //a,将一个unicode转换为字符 2
        console.log(String.fromCharCode(0x4e00));

        console.log(str.concat("hd"));  //合并字符串,和 + 相同 ,5

</script>

四、字符串查找indexOf  替换replace  和大小写转化toLowerCase toUpperCase

<script>
    var str = "abcadea";
    str.indexOf("a");   //查找字符a所在位置

    /*   代码执行了7次
    var num=0;
       for(var i=0;i<str.length;i++){
           if(str[i]==="a"){
               num++;
           }

       }
       console.log(num);*/

    /* 推荐使用，代码执行了3次
    var num=0;
     var index=-1;
     while (str.indexOf("a",index+1)>-1){
         index=str.indexOf("a",index+1);
         num++;
     }
     console.log(num);*/

    var data = [
        {id: 1001, icon: "img/1.png", name: "计算机", num: 1, price: 10},
        {id: 1002, icon: "img/2.png", name: "手机", num: 1, price: 20},
        {id: 1003, icon: "img/3.png", name: "电脑", num: 1, price: 30},
        {id: 1004, icon: "img/4.png", name: "显示器", num: 1, price: 40},
        {id: 1005, icon: "img/5.png", name: "飞行器", num: 1, price: 50},
        {id: 1006, icon: "img/6.png", name: "计时器", num: 1, price: 60},
        {id: 1007, icon: "img/7.png", name: "笔记本", num: 1, price: 70},
        {id: 1008, icon: "img/8.png", name: "草稿本", num: 1, price: 80},
        {id: 1009, icon: "img/9.png", name: "公示牌", num: 1, price: 90},
        {id: 1010, icon: "img/10.png", name: "手机线", num: 1, price: 100}
    ];
    /*
    *  模糊查找    1
    * */

    // 查找name中含有 本 字的
    /*var arr=data.filter(function (t) {
        return t.name.indexOf("本")>-1;
    });*/

    // name中含有 机 且机 是最后一个字符
    var arr = data.filter(function (t) {
        return t.name.indexOf("机") === t.name.length - 1;
    });
    console.log(arr);

    //        str.lastIndexOf();//从后向前查找
    console.log(str.search("a"));//search用于正则表达式查找  1

    //      replace替换字符,可以将字符替换后返回一个替换后的新字符,原字符不变
    //      目前我们只能替换一次,如果要替换所有,就需要写循环
    //      replace多用于正则表达式中的替换   1
    str = str.replace("a", "h");
    console.log(str);

    console.log(str.toLowerCase()); //转换小写  4
    console.log(str.toUpperCase()); //转换大写  4
</script>

五、字符串截取 substr  substring

<script>
        var str="abcde";
        str.slice(1,2);//与数组中的slice完全相同,用于截取字符中某个内容  1

       /* getRandomColor();
        function getRandomColor() {
            var col="rgb(";
            for(var i=0;i<3;i++){
                col+=Math.floor(Math.random()*256)+",";
            }
            col=col.slice(0,-1);
            col+=")";
            console.log(col);
        }*/

//        str.substr(开始位置,要截取字符串的长度)   //2
//       console.log(str.substr(0,3));

//          str.substring(开始位置,截取的结束位置)  //1
//        和slice不同在与,负数不是代表从后向前数,而是位置0的前面(当后面数小于前面数可以理解为从小到大截取)
//        console.log(str.substring(1,3));
//        console.log(str.substring(3,-1)); //abc，从第3个字符串开始向前截取（可以理解为str.substring(-1,3) 截取 0 1 2）
        console.log(str.substring(4,2));    //cd,可以开始位置大于结束位置,这就是逆向截取
    </script>

六、split根据分割符将字符串分割为数组

<script>
        // split根据分割符将字符串分割为数组,和数组中方法join相对,是join的逆方法  1
      /*  var str="a,b,c,d,e";
        var arr=str.split(",");
        console.log(arr);   //["a", "b", "c", "d", "e"]
        */

      /*var str="abcde";
      var arr=str.split("");
      console.log(arr);     //["a", "b", "c", "d", "e"]
      */

       /*注意：str.reverse()  字符串没有倒序方法
       var str="abcde";
        str=str.split("").reverse().join("");//倒序字符
        console.log(str);   //"edcba"
        */

       var url="http://www.163.com/index.html?ab=3&name=xie&password=12345";
      /* var index=url.indexOf("?");
       var str=url.slice(index+1);
       console.log(str);*/
//      console.log(url.split("?")[1]);

        /*function getObject(url) {
            var obj={};
            var str=url.split("?")[1];
            var arr=str.split("&");
            for(var i=0;i<arr.length;i++){
                var str1=arr[i];
                var arr1=str1.split("=");
                var prop=arr1[0];
                var value=arr1[1];
                obj[prop]=value;
            }
            return obj;
        }
*/
        function getObject(url) {
            var obj={};
            var arr=url.split("?")[1].split("&");
            for(var i=0;i<arr.length;i++){
                var arr1=arr[i].split("=");
                obj[arr1[0]]=arr1[1];
            }
            return obj;
        }
        console.log(getObject(url));

//一道面试题：
        // split和join，slice和splice分别是什么？

        var str='{"a":1}';
//        var str=`{"a":1}`;
        console.log(JSON.parse(str));
    </script>

七、Date()对象和setInterval()  clearInterval(id)

<script>
      /*  var date=new Date(); //2
        console.log(date);
        console.log(date.getFullYear());
        console.log(date.getMonth());//月份显示是从0开始计算,1就是2月
        console.log(date.getDate());//几号
        console.log(date.getDay());//星期几  0-6 0是星期日
        console.log(date.getHours());//小时
        console.log(date.getMinutes());//分
        console.log(date.getSeconds());//秒
        console.log(date.getMilliseconds());//毫秒

//        set的所有方法  5
        date.setFullYear(2020);
        date.setMonth(12);//如果设置12大于了11,就会进1年,当前为1月,2021年1月
        console.log(date);*/

        var div=document.getElementById("div0");
        setInterval(animation,1000);

        function animation() {
            var date=new Date();
            div.innerHTML=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
                date.getDate()+"日 星期"+(date.getDay()===0 ? "日" : date.getDay())+
                " "+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
        }

       /* var id=setInterval(fn,16);
        var num=0;
        function fn() {
            console.log(id);
            num++;
            if(num>=3){
                clearInterval(id);
            }

        }*/
/*
*   setInterval() 定时器，每隔多长时间执行一次函数
*  var id= setInterval(每次执行函数,多少毫秒执行一次)
*   返回一个id,这个id的作用可以是clearInterval清除该id,这样就停止了这个时间间隔
*
*   clearInterval(id)  清除时间间隔执行函数
* */

     /* var id=setInterval(fn,16);
      var num=3;
      function fn() {
          num--;
          console.log(num);
          if(num>0) return;
          num=3;
          console.log("aa");
      }*/

        /* setTimeout() 延迟执行函数
        * var id=setTimeout(需要以后执行的函数,需要多少毫秒以后) 延迟执行函数
        *  返回一个id,用来作为清除该延迟使用的
        * clearTimeout 清除延迟处理
        * */
     /*  var id=setTimeout(fn1,4000);

        function fn1() {
//            只要使用setTimeout就一定在函数中使用clearTimeout清除它
            clearTimeout(id);
        }*/

    </script>

八、时间戳

<script>
        //time 1
       /* var date=new Date();
        var time=date.getTime();    //从1970.1.1 0:0:0到现在的毫秒数
        // 永远不会重复
        console.log(time);*/

   /*  用途1：计算代码执行时间
     分解代码运行效率  获取代码之间的时间差

     var time=new Date().getTime();
       for(var i=0;i<10000000;i++){

       }
       console.log(new Date().getTime()-time);*/

   /*
   *   不重复id
   * */
   /*
   *  时间戳
   *  因为每次访问服务器的时间不同,因此,我们可以通过这个时间戳增加在要访问的地址后面
   *  这样就不会读取缓存的数据
   * */
   var url="http://www.163.com/index.html?a=1&b=2&time="+new Date().getTime();
   console.log(url);
    </script>

案例1、中文时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>中文时间</title>
</head>
<body>
    <div class="outer">
        <h1>Mon Jun 24 2019 19:43:16  ---> 二零一九年 六月 二十四日 星期一 十九时 四十三分 十六秒</h1>
        <h2></h2>
    </div>
</body>
<script>
    var chr=["零","一","二","三","四","五","六","七","八","九"];
    var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    init();
    setInterval(init,1000);

    function init() {
        var date = new Date();
        /*console.log(date);
        console.log(date.getFullYear());    //年
        console.log(date.getMonth()+1);//月 从（0-11），要在原基础上+1
        console.log(date.getDate());    //日
        console.log(date.getDay());//星期（0-6） 0表示星期日
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());*/
        var year = date.getFullYear().toString();
        var month = date.getMonth()+1;
        var datee = date.getDate();
        var day = date.getDay();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        year = num2chr(year) + "年 ";
        month = digits2(month) +"月 ";
        datee = digits2(datee) +"日 ";
        week = weeks[day]+ " ";
        hour = digits2(hour) + "时 ";
        minute = digits2(minute) + "分 ";
        second = digits2(second) + "秒 ";

        document.querySelector(".outer h2").innerHTML = year+month+datee+week+hour+minute+second;
    }

    //年份转化 如：2019 --->二零一九年
    function num2chr(str) {
        var _str = "";
        for(var i=0;i<str.length;i++){
            _str += chr[str[i]]
        }
        return _str
    }

    //数字转化 如：24 --->二十四
    function digits2(num) {
        if(num<10){
            return chr[num]
        }
        var shiwei = parseInt(num/10);
        var gewei = num%10;
        return gewei?chr[shiwei]+"十"+chr[gewei]:chr[shiwei]+"十";
    }

</script>
</html>

Mon Jun 24 2019 19:43:16 ---> 二零一九年 六月 二十四日 星期一 十九时 四十三分 十六秒

案例2、自定义数字时钟

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定制电子时钟</title>
    <style>
        .outer{
            position: relative;
            margin: auto;
        }
        .outer div{
            float: left;
            width: 200px;
            height: 165px;
            border: 1px solid red;
            background: url("img/num.png");
            overflow: hidden;
            background-position-x: -200px ;
            background-position-y: -170px ;
        }
        .outer span{
            float: left;
            font-size: 26px;
            font-weight: 600;
            text-align: center;
            line-height: 165px;
        }
    </style>
</head>
<body>
<div class="outer">
    <div id="hour1"></div>
    <div id="hour2"></div><span>:</span>
    <div id="minute1"></div>
    <div id="minute2"></div><span>:</span>
    <div id="second1"></div>
    <div id="second2"></div>
</div>
</body>
<script>
    var $hour1,$hour2,$minute1,$minute2,$second1,$second2;
    // 0 1 2 3 4 5 6 7 8 9 的坐标位置
    var pointArray = [
        {x:820,y:170},
        {x:0,y:0},
        {x:205,y:0},
        {x:410,y:0},
        {x:615,y:0},
        {x:820,y:0},
        {x:0,y:170},
        {x:205,y:170},
        {x:410,y:170},
        {x:615,y:170},
    ];
    init();

    function init() {
        $hour1 = document.querySelector("#hour1");
        $hour2 = document.querySelector("#hour2");
        $minute1 = document.querySelector("#minute1");
        $minute2 = document.querySelector("#minute2");
        $second1 = document.querySelector("#second1");
        $second2 = document.querySelector("#second2");
        // 开启定时器
        setInterval(animation,1000)
    }
    function animation() {
        var date = new Date();
        var hour = date.getHours();
        var minute = date.getMinutes();
        var second = date.getSeconds();
        /*console.log(typeof hour);       //number 类型，要将其改为字符串类型
        console.log(typeof getString(minute));
        console.log(second);*/

        setImg($hour1,getString(hour)[0]);
        setImg($hour2,getString(hour)[1]);
        setImg($minute1,getString(minute)[0]);
        setImg($minute2,getString(minute)[1]);
        setImg($second1,getString(second)[0]);
        setImg($second2,getString(second)[1]);
    }

    function getString(num) {
        return num<10? "0"+num:num.toString()
    }

    function setImg(ele,num) {
        ele.style.backgroundPositionX = -pointArray[Number(num)].x+"px";
        ele.style.backgroundPositionY = -pointArray[Number(num)].y+"px";
    }
</script>
</html>

数字时钟