javascript --字符串对象

和蔼的阿木木o

已于 2022-08-04 14:53:01 修改

阅读量538

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

于 2022-07-27 18:44:37 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/126010249

版权

js 专栏收录该内容

52 篇文章 1 订阅

订阅专栏

ECMA-262定义：

JS中的对象类型

数学对象

div随机颜色

日期对象

转换为本地日期显示

设置时间对象

动态时钟，计时器与定时器

字符串对象

length 随机输出字符串里的字符

indexOf()

获取焦点，失去焦点

利用焦点判断输入框格式是否正确

replace()

substr(start,length)

substring(start,stop)

Array.slice(start, end)

stringObject.split(separator,limit) 分割

string.match(regexp)

ECMA-262定义：

属性的无序集合，每个属性存放一个原始值、对象或函数

对象是无特定顺序的值的数组

对象是一种特殊的数据类型，可以包含多个成员

对象的成员分为两种：属性和方法

属性（Property）：

-封装对象的数据，表示与对象有关的值

-对象名.属性名

方法（Method）：

-封装对象的行为，表示对象可以执行的行为或可以完成的功能

-对象名.方法名

Object = Property + Method

JS中的对象类型

1.内置对象/原生对象：指JavaScript语言本身预定义的对象，在ECMAScript标准定义，由所有的浏览器厂家来提供具体实现，由于标准的统一，故这些对象的浏览器兼容性问题不太大

String、Number、Boolean Array、Date、RegExp、Math Error Object、Function Global

2.宿主对象：指JavaScript运行环境（即浏览器）提供的对象，由浏览器厂家自定义提供实现，早期存在较大的兼容性问题，当前其中一些主要的对象已经被大部分浏览器兼容；具体分为如下两大类

（1）BOM对象：Browser Object Model

Window、Navigator、Screen、History、Location

（2）DOM对象：Document Object Model

Document、Anchor、Area、Base、Body、Button、Canvas、Event、Frame、Frameset、IFrame、Image、Link、Meta、Style、Form、Input Button、Input CheckBox、Input File、Input Hidden、Input Password、Input Radio、Input Reset、Input Submit、Input Text、Option、Select、Textare、Table、TableCell、TableRow

3.自定义对象：指由用户创建的对象，兼容性问题需要由编写者注意

创建自定义对象3种：

（1）对象直接量；由名/值对组成的映射表，名和值之间用冒号分隔，名/值对之间用逗号分隔

var obj1 = {};

var obj2 = {x:0，y:0};

var obj3 = {name：‘Mary’，age：18}

（2）new Object()；创建系统对象，创建通用对象，创建自定义对象（自定义构造函数）

var obj1 = new Array;

var obj2 = new Date();

（3）function 对象模板

数学对象

常量
Math.PI     圆周率 π
数学方法
Math.ceil()     向上取整    返回的是大于或等于函数参数，并且与之最接近的整数     如:Math.ceil(2.1) ->3
Math.floor()   向下取整     返回的是小于或等于函数参数，并且与之最接近的整数     如:Math.floor(0.4) ->0    Math.floor(1.9)->1
Math.round(num) 返回与num最接近的整数(四舍五入)
Math.max(x,y)    返回指定的数中带有较大的值的那个数
Math.min(x,y)     返回指定的数字中带有最低值的数字

Math.abs()         返回数的绝对值
Math.pow(x,y)     x 的 y 次幂
Math.random()    返回介于 0 ~ 1 之间的一个随机数     （0,1)

从1开始至任意值   [1 , 任意值]
parseInt(Math.random()*上限+1);

范围值：从任意值开始至任意值
parseInt(Math.random()*(上限-下限+1)+下限);

<script>
    document.write(Math.PI.toFixed(2)+"<br>"); //圆周率
    document.write(Math.E);
    document.write("<hr>")

    document.write(Math.ceil(3.12)+"<br>");//4  向上取整，返回的是比参数大或等于的一个整数
    document.write(Math.ceil(-3.12));//-3  向上取整，返回的是比参数大或等于的一个整数
    document.write("<hr>")

    document.write(Math.floor(3.0)+"<br>");//3 向下取整 返回值比参数小
    document.write(Math.floor(0.4)+"<br>"); //0
    document.write(Math.floor(1.9)+"<br>"); //1
    document.write("<hr>")

    //四舍五入取整
    document.write(Math.round(5.987)+"<br>")//6
    document.write(Math.round(-5.987)+"<br>")//-6
    document.write(Math.round(5.487)+"<br>")//5
    document.write("<hr>")

    document.write(Math.max(4,8,10,7)+"<br>");   //求这组数中的最大值
    document.write(Math.min(4,5,8));求这组数中的最小值

    document.write("<hr>")
    document.write(Math.abs(-5)+"<br>");//5     求绝对值 

    document.write("<hr>")
    document.write(Math.pow(5,5)+"<br>");  //x的y次幂
    document.write("<hr>")

    document.write(Math.random()+"<br>")   //介于0-1之间的随机数，小数
    document.write(Math.random() * 10 +"<br>")   //放大十倍 可取0-10之间的小数
    document.write(Math.floor(Math.random() * 10) +"<br>")  // [0,10)  向下取整数
    document.write(Math.round(Math.random() * 10) +"<br>")  // [0,10]  四舍五入取整数
    document.write(Math.floor(Math.random() * 5 +1) +"<br>")  // [1,6)  1-5的整数
    document.write(Math.ceil(Math.random() * 5))  // (0,5]

    //公式
    [m,n]
    Math.floor(Math.random()*(n - m + 1) + m )
</script>

div随机颜色

<style>
        #box{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
<script>
    function randcolor(){
        return Math.round(Math.random()*255);
    }
        var r= randcolor();
        var g=randcolor();
        var b=randcolor();
        console.log(r,g,b);

        var oDiv = document.getElementById("box");
        // oDiv.innerHTML= "<div style='width:100%;height:200px;background-color:rgb("+r +","+ g+","+ b + ")'></div>"
        oDiv.innerHTML = `<div style='width:100%;height:200px;background-color:rgb(${r},${g},${b})'></div>`
    
</script>

日期对象

var 日期对象=new Date(参数)
参数格式：MM DD,YYYY,hh:mm:ss

var  today=new Date();   //返回当前日期和时间
var tdate=new Date("september 1,2009,14:58:12");

Date类提供了日期和时间的操作，我这给大家介绍几个最常用的
函数，其它的请大家参考javascript帮助文档。
var mydate=new Date();       获取当前时间
mydate.getFullYear()        获取年份
mydate.getMonth()            获取月份,月份从0开始的,即0就是1月
mydate.getDate()                 获取日期
mydate.getDay()                   获取星期    0-->周日    1-->周一

mydate.getHours()                获取当前的小时
mydate.getMinutes()              获取分钟
mydate.getSeconds()             获取秒
mydate.getMilliseconds()        获取毫秒
mydate.getYear()                 返回一个距1900的偏移量，这个偏移量加上1900就是正确的年份
mydate.getTime()                 返回一个整数值,这个整数代表了从1970年1月1日开始计算到Date对象中的时间之间的毫秒数

转换为本地日期显示

<script>
    var mydate= new Date();
    // console.log(mydate); //包含日期里的所有内容
    // 日期转换为本地时间 to
    console.log(mydate.toLocaleString());  //年月日 时分秒
    console.log(mydate.toLocaleDateString());//年月日
    console.log(mydate.toLocaleTimeString());//时分秒

    //get
    console.log(mydate.getFullYear());//年份
    console.log(mydate.getMonth() + 1);//月份 [0-11]
    console.log(mydate.getDate());//日期
    console.log(mydate.getDay()); //星期 [0-6]
    console.log(mydate.getHours());//24小时制时间
    console.log(mydate.getUTCMinutes());//分钟
    console.log(mydate.getSeconds());//秒
    console.log(mydate.getMilliseconds());//毫秒   1s=1000ms

    console.log(mydate.getTime());  //距离1970.1.1的毫秒数
     console.log(Date.now());  //时间戳
</script>

设置时间对象

<script>
    //设置时间方法一
    var mydate = new Date(); //当前时间
    var t1 = mydate.getTime();//当前时间距离1970.1.1毫秒数
    
    var mydate2 = new Date("2022/7/31 10:00:00");  //在参数里设置时间
    // console.log(mydate2 - mydate);
    var t2 = mydate2.getTime(); //2022-7-31 10:00:00到1970.1.1之间毫秒数

    console.log(t2-t1);


    //设置时间方法2
    //getxxx()  除了getDay()之外，其他getxx()都可以写成 set()
    var d=new Date();
   
    d.setFullYear(2021);
    d.setMonth(6); //设置月份时 数值-1 === 实际月份
    console.log(d);

</script>

动态时钟，计时器与定时器

setInterval() 方法执行多次
setInterval（"调用的函数", "指定的时间间隔"） 交互时间

clearInterval(timer); //清除/关闭定时器
参数说明：
1.代码：要调用的函数或要执行的代码串
2.交互时间：周期执行或调用表达式之间的时间间隔，以毫秒计（1s=1000ms)
setTimeout() 方法执行一次
setTimeout（“调用的函数”, “指定的时间后"） 延迟时间
参数说明：
1.代码：要调用的函数或要执行的代码串
2.延迟时间：在执行代码前需要等待的时间，以毫秒为单位（1s=1000ms)
返回值：
一个可以传递给clearInterval()从而取消对“代码”的周期性执行的值

setInterval() 方法

<script>
    // setInterval("console.log('hello world')",2000)
    var i = 10;
    var box =  function(){
        console.log(i);
        i--;
        if(i<1){
            clearInterval(timer);  //清除定时器
        }
    }
    //setInterval("box()",2000)  //从10倒计时，每间隔两秒执行一次box；
    var timer = setInterval(box,1000);

    // 定时器
    // setInterval(参数1，参数2)
    // 参数1：要执行的js代码串或调用的函数
    // 参数2：间隔时间 单位：默认毫秒

</script>

setTimeout() 方法

<script>
    
    setTimeout("console.log('hello')",1000);  //延迟一秒，只执行一次

    var i=10,t;
    function box(){
        console.log(i);
        i--;
        t = setTimeout(box,1000);
        if(i<1){
            clearTimeout(t)
        }
    }
    box();
    
    //递归  在函数里 调用函数本身
</script>

字符串对象

创建String对象
var str = new String();

var str = new String();
alert(str);//输出空字符串
str = new String("some string here");
alert(str);//输出字符串"some string here"
//表面上看,这和直接创建的字符串是一样的效果
str = "some string here";
alert(str);

length                      属性,返回字符串的长度       [0,strObj.length-1]
indexOf()                 返回字符串内第一次出现子字符串的字符位置
lastIndexOf()           返回字符串中子字符串最后出现的位置
charAt()                   返回指定位置的字符。字符串中第一个字符的下标是 0。如果参数 index 不在 0 与 string.length-1 之间，该方法将返回一个空字符串。
charCodeAt ()          返回一个整数，代表指定位置上字符的 Unicode 编码 (返回值是 0 - 65535 之间的整数)   参数：必需。表示字符串中某个位置的数字，即字符在字符串中的下标。
fromCharCode()        从一些 Unicode 字符值中返回一个字符串
replace(str/regexp,newstr)       进行文字替换,用newstr替换str/regexp
返回替换后的字符串的复制

substr(start,length)      返回一个从指定位置开始的指定长度的子字符串,从start开始截取长度为length的子字符串
substring(start,stop)     返回位于 String 对象中指定位置的子字符串,从start开始(包含)，到stop位置结束(不包含)。如果参数 start 与 stop 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。如果 start 比 stop 大，那么该方法在提取子串之前会先交换这两个参数。不接受负的参数
toLowerCase()         返回一个字符串，该字符串中的字母被转换为小写字母
toUpperCase()         返回一个字符串，该字符串中的所有字母都被转化为大写字母
split()                       把字符串分割为字符串数组。

String.fromCharCode(编码)    根据编码返回字符

strObj.concat(参数)

// 参数：字符串，多个字符串间可用逗号隔开

// 连接两个或多个字符串

// 返回值：连接后的字符串

strobj.startswith(参数1参数2)

    // 从参数1位开始查找字符串是否以参数1开头

//参数1：必须查找的子串

// 参数2：可选，开始查找的位置，若省略。从0开始查找

length 随机输出字符串里的字符

<script>
    // 构造函数
    // var str = new String();
    // var str = new String();
    // str = "hello";
    // console.log(str);
    // console.log(str.length); //字符串长度 索引[0,str.lenth-1]

    // for(var i=0;i < str.length; i++){
    //     console.log(str[i]);
    // }

    // 如何随机输出字符串里的字符
    var str = new String("hello");
    console.log(str);
    console.log(str.length);
    // str = "hello";
    var n = Math.floor(Math.random() * str.length)
    console.log(str[n]);


</script>

indexOf()

stringObject.indexOf(substring, startpos)

说明：
1.该方法将从头到尾地检索字符串 stringObject，看它是否含有子串 substring。
2.可选参数，从stringObject的startpos位置开始查找substring，如果没有此参数将从stringObject的开始位置查找。
3.如果找到一个 substring，则返回 substring 的第一次出现的位置。stringObject 中的字符位置是从 0 开始的。
注意：
1.indexOf() 方法区分大小写。
2.如果要检索的字符串值没有出现，则该方法返回 -1。
例如: 对 "I love JavaScript!" 字符串内进行不同的检索：
var str="I love JavaScript!“;
document.write(str.indexOf("I") + "<br />");
document.write(str.indexOf("v") + "<br />");
document.write(str.indexOf("v",8));

   <script>
     var str = new String("i love javascript,love qilu");

      console.log(str.indexOf("love"))  //从0开始查找子串love
      console.log(str.indexOf("love",3))  //从0开始查找子串love
     console.log(str.lastIndexOf("love"));   //查找最后一次出现字符串的位置
     console.log(str.lastIndexOf("love",6));

      strobj.indexOf(参数1,参数2)
      参数1：必须 要查找的子串
      参数2：必须 开始查找的位置 若省略，从0开始查找

     返回值：如果能查找到该子串，返回子串在整个字符串中第一次出现的位置。如果查找不到该子串，返回-1；

</script>

获取焦点，失去焦点

<body>
    <input type="text" onfocus="fun()" onblur="fun2()">
</body>
<script>
    function fun(){
        console.log(1233);
    }

    function fun2(){
        console.log("输入框失去焦点");
    }
</script>

利用焦点判断输入框格式是否正确

<body>
    邮箱：<input type="text" id="email">
    <span id="tip"></span>
</body>
<script>
        var oIpt = document.getElementById("email");
        var oSpan = document.getElementById("tip");
        oIpt.onblur = function (){
            var val = this.value; //输入框中的值
            if(val.indexOf("@") === -1){ //value值不含有@
                oSpan.innerHTML = "请输入邮箱的正确格式";
                oSpan.style.color = "red";
            }else{
                oSpan.innerHTML = "输入正确";
                oSpan.style.color = "green";
                this.style.borderColor = "green";

            }
        }
</script>

replace()

语法： stringObject.replace(regexp/substr,replacement)
此方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串

<script>
    var str = "I love javascript,I love web";
    str =  console.log(str.replace("love","(❤❤❤)"));替换文字 或者图片
    var str2 =  console.log(str.replace(/love/gi,"(❤❤❤)")); //g:global 全局的，查找到几个替换几个，i:ignorecase 忽略大小写
    console.log(str2);
</script>

substr(start,length)

<script>
    var str = "I love javascript"
    console.log(str.substr(2));
    console.log(str.substr(2,4)); //从第二位开始，截取4位
    console.log(str.substr(2));
    console.log(str.substr(-7));

    strObj.substr(参数1，参数2)
    参数1：必选，开始截取的位置，可以为负,-1代表最后一个字符.-2代表倒数第二个字符,..
    参数2：可选，   截取的长度，  若省略 ，截取到字符串末尾
    返回值，截取的字符串
</script>

substring(start,stop)

<script>
    var str = "I love javascript";
    console.log(str.substring(2)); //从第二位到结尾
    console.log(str.substring(2,6)); //love 
    console.log(str.substring(6,2)); //love 先进行位置交换，在进行截取
    strObj.substring(参数1，参数2)
    参数1：必选，开始截取的位置，
    参数2：可选，  结束截取的位置，  若省略 ，截取到字符串末尾
    返回值，截取的字符串
    注意
    1.截取时，包含开始位置，不包含结束位置，截取的长度=结束位置-开始位置
    2.若开始位置 == 结束位置，截取的是空串
    3.若开始位置 > 结束位置，截取前会先进行位置交换，在截取。
</script>

案例

调取函数获得截取的值

  <script>
    var str = "user=dyz;gender=女;age=18"
    // var i =str.indexOf("user")//0
    // var start = i + "user".length +1
    // var end = str.indexOf(";",i); //从i开始查找;在整个字符串中第一次出现的位置
    // if(end===-1){
    //     end = str.length
    // }
    // console.log(str.substring(start,end));
    var s1 =  getval("user");
    var s2 =  getval("gender");
    var s3 =  getval("age");
    console.log(s1, s2, s3);

    function getval(name){
        var i =str.indexOf(name + "=");
        var start = i + name.length +1;
        var end = str.indexOf(";",i)
        if(end === -1){
            end = str.length
        }
        return str.substring(start,end);
    }

 </script>

Array.slice(start, end)

参数	描述
start	可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

参数

描述

start

可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。

end

可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

Type	描述
Array	返回一个新的数组，包含从 start（包括该元素）到 end （不包括该元素）的 arrayObject 中的元素。

<script>
        var str = "I love javascript."
        console.log(str.slice(2));//截取到字符串末尾
        console.log(str.slice(-2));//t. 截取到字符串末尾
        console.log(str.slice(2,6));//包含开始位置，不包含结束位置
        console.log(str.slice(6,2));//开始<结束
        console.log(str.slice(2,-6));

        strObj.slice(参数1，参数2)
        参数1：必须，开始截取的位置，可以为负，-1代表最后一个字符，-2代表最后一个字符...
        参数2:可选，结束截取的位置可以为负，–1代表最后一个字符，-2代表倒数第二个字符,..
        返回值:截取的字符串
        注意点:
         1.截取时，包含开始位置，不包含结束位置，截取的长度 = 结束位置 – 开始位置
         2.开始位置 >= 结束位置 截取的空串
</script>

stringObject.split(separator,limit) 分割

split()方法将字符串分割为字符串数组，并返回此数组。

注意：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。
我们将按照不同的方式来分割字符串：

<script>
    // var str = "I love javascript";
    // var str = "131-9988-6792";
    // console.log(str.split("l"));
    // console.log(str.split(" "));
    // console.log(str.split(" ",2));
    console.log(str.split(/\d/))
    console.log(str.split("")); //若想把每一个字符都进行分割，第一个参数写成空串

    // strObj.split(参数1，参数2)
    // 参数1:必须，分隔符（从哪分割）
    // 参数2：可选，分割的份数 若省略 不限制分割份数
    // 返回值：数组
</script>

string.match(regexp)

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

参数	描述
regexp	必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象，则需要首先把它传递给 RegExp 构造函数，将其转换为 RegExp 对象。