JavaScript篇.day06-数字、日期、字符串、数学的常用方法,正则表达式_js用tostring将apple,pear,peach,orange转换为字符串进行输出-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_54379580/article/details/128473009

1.Number数字对象

常用方法:

isNaN() 判断是否为非数字
toFixed() 保留几位小数(四舍五入)
toString() 转换为字符串
valueOf() 返回Number对象原始值

// 数字对象Number

    // 属性
    // 最大值
    console.log(Number.MAX_VALUE)  //1.7976931348623157e+308
    console.log(Number.MIN_VALUE)  // 5e-324

    // 常用方法
    // isNaN() 判断是否为非数字     不是一个数字返回true, 是数字返回false
    console.log(isNaN("aaa"))  // true 
    
    // toFixed()   保留几位小数 (四舍五入)    没有参数则保留整数位
    console.log(123.5.toFixed())    // 124
    console.log(123.52.toFixed(1))   //123.5

    // toString()  转换为字符串
    var num = 12355
    console.log(typeof num.toString())  // string

    // valueOf() 返回 Number对象原始值
    var str = 1e+4
    console.log(str.valueOf())     //100

2.Date日期对象

创建日期: new Date()

常用方法:

getFullYear() 获取年份
getMouth() 获取月份(0-11)
getDate() 获取日期
getHours() 获取小时
getMinutes() 获取分钟
getSeconds() 获取秒数
getTime() 获取时间戳

// 日期   月份从0-11
    // 创建日期
    var curTime = new Date()
    var oldTime = new Date(2022,1)  //可给年,月(0-11)
    console.log(curTime)  //Wed Dec 28 2022 09:33:00 GMT+0800 (中国标准时间)
    console.log(oldTime)   //Tue Feb 01 2022 00:00:00 GMT+0800 (中国标准时间)

    // 获取时间 get    设置时间 set
    // 获取年份
    console.log(curTime.getFullYear())  // 2022
    // 获取月份
    console.log(curTime.getMonth())  // 11  表12月
    // 获取日期
    console.log(curTime.getDate())   //28
    // 获取小时
    console.log(curTime.getHours())   //9
    // 获取分钟
    console.log(curTime.getMinutes())  //44
    // 获取秒数
    console.log(curTime.getSeconds())  //43
    // 获取一个时间戳   当前时间点与格林威治时间相差的毫秒ms数
    console.log(curTime.getTime())  //1672192097099

3.String字符串对象

获取字符串长度: length属性

常用方法:

trim() 去除两端空格
charAt() 获取某个索引位置的字符
substring(from, to) 截取
indexOf() 查找指定子串首次出现的索引, 子串不存在, 返回-1
lastIndexOf() 查找指定子串最后出现的索引, 子串不存在, 返回-1
concat() 拼接字符串, 相当于+
toLocaleUpperCase() / toLocaleLowerCase() 转换为大/小写

支持正则表达式的常用方法:

replaceAll() / replace() 替换所有/ 第一次出现字符,
split() 分割, 支持正则
match() 匹配满足条件的字符串, 返回数组
search() 检索, 返回满足条件的首次出现字符串的首个字符索引

// 字符串常用方法
      var str1 = 'a sd '
      var str2 = 'qwerty,uiopoi'
      console.log(str1) //"   a sd "
      console.log(str2) //qwerty,uiopoi
      // length属性 获取字符串长度
      console.log(str1.length) // 5
      console.log(str2.length) // 13
      // 1. trim() 去除首尾两端空格
      console.log(str1.trim()) //"a sd"

      // 2. charAt() 获取某个索引位置的字符
      console.log(str2.charAt(2)) //2

      // 3. substring(from, to) 截取  [indexStart, endIndex) 索引左闭右开
      console.log(str2.substring(0, 6)) // qwerty

      // 4. indexOf()  查找指定子串首次出现的索引         子串不存在, 返回-1
      //    lastIndexOf()  查找指定子串最后出现的索引
      console.log(str2.indexOf('i')) // 8
      console.log(str2.lastIndexOf('i')) // 12

      // 5. concat() 拼接字符串
      console.log(str1.concat(str2)) //a sd qwerty,uiopoi

      // 6. toLocaleUpperCase()/toLocaleLowerCase() 转换为大/小写
      var str3 = 'weadSFSFFAWwaaa'
      console.log(str3.toLocaleUpperCase())  //WEADSFSFFAWWAAA
      console.log(str3.toLocaleLowerCase())  //weadsfsffawwaaa

      // 支持正则表达式的常用方法
      // 7. replace()  将第一个替换    replace(regExp, replacement) 正则,替换的内容
      // replaceAll()  将所有替换        支持正则
      console.log(str2.replace('o', 'mmmmm')) // qwerty,uimmmmmpoi
      console.log(str2.replaceAll('o', 'mmmmm')) //qwerty,uimmmmmpmmmmmi

      // 8. split()  分割字符串,并返回数组     支持正则
      var arr = str2.split(',')
      console.log(arr) // ['qwerty', 'uiopoi']

      // 9. match() 匹配字符串/正则, 返回数组    匹配结果与正则表达式修饰符有关, 有g全局匹配, 没有则只匹配一次
      var str4= 'apple pear orange peach watermalon'
      // 匹配所有包含字母 p 的水果
      console.log(str4.match(/[a-z]*p[a-z]*/g));  //['apple', 'pear', 'peach']
      console.log(str4.match('pear'));  //['pear', index: 6, input: 'apple pear orange peach watermalon', groups: undefined]

      // 10.  search() 检索  返回满足正则对象出现的首个字符串首字符的索引, 没有返回-1
      console.log(str4.search('pear')); //6
      console.log(str4.search(/pear/)); //6

4.数学常用方法

abs() 绝对值
ceil()/floor() 向上(大)/下(小)取整, 注意负数的大小
max()/min() 求最大/小值
random() 返回 [0,1)的随机数
round() 四舍五入

 // 数学常用方法  Math

      // Math.abs()  求绝对值
      console.log(Math.abs(-123)) //123
      // ceil()   向上(大)取整
      console.log(Math.ceil(123.45)) // 124
      console.log(Math.ceil(-123.45)) // -123
      // floor()  向下(小)取整
      console.log(Math.floor(123.45)) // 123
      console.log(Math.floor(-123.45)) // -124
      // max() 最大值
      console.log(Math.max(1, 2, 3)) // 3
      // min() 最小值
      console.log(Math.min(1,2,3));  // 1
      // pow() x的y次幂(次方)
      console.log();
      // random()  返回(0.0 - 1)随机数
      console.log(Math.random());
      // round()  返回最接近的数(四舍五入)
      console.log(Math.round(3.7));  // 4
      
      // 返回[1-10]之间的随机整数
      console.log(Math.round(Math.random() * 9) + 1);

5.RegExp正则表达式

// 正则表达式
    // 书写方式    / 匹配规则 /
    // 匹配规则
    // 1. 必须包含admin
    var reg1 =  /admin/
    // 2. 必须是admin  ^开始标识符  $结尾标识符
    var reg2 = /^admin$/
    // 3. 必须由一个字母构成
    var reg3 = /^[a-zA-Z]$/
    // 4. 必须由多个字母(a-zA-z)/数字(0-9)构成  
    var reg4 = /^[a-zA-Z0-9]*$/
    // 5. 次数
    //  +:1次或多次   *:0次或多次(1次也可)  ?:0次或1次
    // {m,n} 匹配次数 最少m次, 最多n次    {1,}一次及以上
    var reg5 = /^[a-z]{1,5}$/
    // 6. ^非    ^写在最前边指开始, 里边的指非
    var reg6 = /^[a-zA-Z^0-9]*$/
    // 7. (m|n|k)  匹配其中任一个字符串   
    var reg7 = /^(red|blue)$/
    var reg7 = /(red|blue)/    //没有^ $ 表示,内容包含其中一个字符串
    // 8. \s空白字符(包括换行)   \S 非空白字符(不包括换行)
    var reg8 = /\S\s/  //匹配所有
    var reg8 = /(^\s*|\s*$)/g  // 开头或结尾空格都可
    // 9. \d数字[0-9]   \D 非数字[^0-9]
    var reg9 = /\d\D/
    // 10. \w 匹配单词字符(数字,字母,下划线)   \W 非单词字符   
    var reg10 = /[0-9A-Za-z_]/
    var reg10 = /\w/
    // 11.  .任意字符(除换行\n,\r之外的任意单个字符)
    var reg11 = /./
    var reg11 = /\./ // 匹配小数点
    // 12. 修饰符   i 不区分大小写    g 全局匹配,查找所有匹配想
    var reg12 = /[a-z]/i   //a-z A-Z
    var reg12 = /[a-z]/g   //从头匹配到结尾
    var reg12 = /[\w]+/gi  //全局不区分大小写匹配一次或多次单词字符

用户注册

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户注册</title>
    <style>
      * {
        margin: 0 auto;
        padding: 0;
      }
      .form {
        margin-top: 40px;
        padding: 30px;
        width: 300px;
        height: 300px;
        display: flex;
        justify-content: center;
        text-align: right;
        background-color: rgb(246, 220, 220);
      }
      div.form ul li {
        line-height: 50px;
        list-style: none;
      }

      div.form ul li input {
        height: 25px;
      }
      div.form ul li:last-child button {
        width: 200px;
        height: 35px;
        border: 0;
        font-size: 18px;
        background-color: rgb(245, 186, 180);
      }
    </style>
  </head>
  <body>
    <div class="form">
      <ul>
        <li>
          <label for="uname">用户名:</label>
          <input type="text" name="uname" id="uname" />
        </li>
        <li>
          <label for="password">密码:</label>
          <input type="text" name="password" id="password" />
        </li>
        <li>
          <label for="email">邮箱:</label>
          <input type="text" name="email" id="email" />
        </li>
        <li>
          <label for="tel">电话:</label>
          <input type="text" name="tel" id="tel" />
        </li>
        <li>
          <button onclick="check()">注 &nbsp; &nbsp; 册</button>
        </li>
      </ul>
    </div>

    <script>
      // 点击注册按钮, 校验输入框内容
      function check() {
        // 校验通过
        if (unameCheck() && pswCheck() && emailCheck() && telCheck()) {
          alert('注册成功!')
        } else {
          console.log('--------')
        }
      }

      // 用户名校验函数     要求: 不能为空,6-10位 只能以字母开头,后字母+数字
      function unameCheck() {
        // 1. 获取文本框的输入信息 ()
        var uname = document.getElementById('uname').value
        // (1)判断是否为空    去除首尾空格 trim()     !uname不存在(undefined)  uname.trim() === ""(null)
        isNull(uname) //为空
        // 不为空
        var unameReg = /^[a-zA-Z][\dA-Za-z]{5,9}$/g
        // 判断是否满足正则表达式
        if (!unameReg.test(uname)) {
          //不满足
          console.log('no1')
          return false
        }
        // }
        return true
      }

      // 密码校验函数     要求: 6-18位 前2位必须是字母,后面可以是单词字符(数字,字母,下划线)
      function pswCheck() {
        var psw = document.getElementById('password').value
        // 判断输入内容是否为空
        // 为空
        isNull(psw)
        // 不为空
        var pswReg = /^[a-zA-Z]{2}\w{4,16}$/g
        if (!pswReg.test(psw)) {
          //不满足
          console.log('no2')
          return false
        }
        return true
      }

      // 邮箱校验函数    要求: qq/电话  qq/163/139邮箱   qq(5-10位数字), 139(电话11位数字 )  163(. - 单词字符6-10位)
      function emailCheck() {
        var email = document.getElementById('email').value
        // 判断输入内容是否为空
        // 为空
        isNull(email)
        // 不为空
        var emailReg =/(\d{5,10}@qq|1[345789]\d{9}@139|[-\.\w]{6,10}@163)(?=\.com)/g
        if (!emailReg.test(email)) {
          //不满足
          console.log('no3')
          return false
        }
        return true
      }

      // 电话校验函数    11位数字，第一位只能1，第二位[345789],后面数字
      function telCheck() {
        var tel = document.getElementById('tel').value
        isNull(tel)
        var telReg = /^1[345789]\d{9}$/
        if (!telReg.test(tel)) {
          //不满足
          console.log('no4')
          return false
        }
        return true
      }

      // 输入内容为空的函数
      function isNull(str) {
        if (!str || str.trim() === '' || str.length === 0) {
          //输入内容为空
          console.log('输入内容为空!!!!!')
          return false
        }
        // return true
      }
    </script>
  </body>
</html>

PreviousNotes:

JS.1-JS基础知识_Mteee.的博客-优快云博客