js变量,常量,数据类型,类型转换

48 阅读1分钟

js书写位置

<body>
    <!-- 内部写法 -->
    <script>
        alert('你好,js')
    </script>
    <!-- 外部的js代码在src中带入 -->
    <script src="./index.js"> </script>
                  <!-- 不要再中间写 -->
                  
</body>
行内js
    <button onclick="alert('逗你玩')">点我月入过万</button>

变量

<script>
        // 声明变量
        let username 
        // 变量赋值
        username = 18
        // 不要加引号
        document.write(username)
        // 直接赋值
        let age = 18
        console.log(age)
        let num = 20
        let uname = '张三' 18
        console.log(num)  20
        console.log(uname) 张三
    </script>
更新变量的值
  <script>
        let age = 18
        age = 19
        console.log(age)
    </script>

输入和输出语法

    <script>
        // document.write('需要输出的内容')
        // alert('输出的内容')向浏览器弹出的警告框
        // console.log('控制台需要输出的内容')
        //  输出在浏览器能够看到的
        // 输入通过键盘我们拿到的
        // prompt('请输入你的银行卡密码')提示显示输入框
    </script>

弹出用户名

1、声明一个变量来接收名字 2.在浏览器打印你的名字

<script>
        let name = prompt('请输入你的名字')
        document.write(name)
    </script>

交换俩个变量的值


  <script>
       
        let num1 = 10  声明变量一
        let num2 = 20  声明变量二
        let temp     创建一个临时变量
       temp = num1   吧变量一赋值给临时变量
       num1 = num2   吧变量二赋值给变量一
       num2  = temp  吧临时变量赋值给变量二
           接收单位=赋值单位
        console.log(num1)  20
        console.log(num2)  10
    </script>

变量命名的规范与规则

  1. 关键字不能以js内置的一些英语词汇.例如let.var .if for等等
  2. 只能用下划线,字母,数字 $组成切数字不能开头
  3. 严格区分大小写、
  4. 小驼峰命名法 userName

let和var的区别

   // var可以先使用后声明
        console.log(age)
        var age = 12
        // 可以重复声明
        var age = 123

数组的基本使用

 <script>
        // 变量保存一个数据
        // 数组保存多个数据
        // 数组最好用log打印
        // 数组从0开始,叫索引也叫下标
        let arr = ['张三','刘备','关羽']
        console.log(arr)
        // 需求:控制台打印关羽
        // console.log(arr[2])--关羽
    //    console.log(arr.length) 3
    //  length -数组长度用点号加length

常量

 <script>
    //    常量 const
    // 声明一个常量
    // 一旦声明,值不能修改,声明后必须要赋值
    const π =3.1415926
    console.log(π)
    </script>

数据类型

  • 数据类型分为俩大类一类是基本数据类型一类是应用数据类型
  • 基本数据类型:number数字型,string字符串型。boolean布尔型,undefined未定义,null空类型
  • 引用数据类型:object对象

NAN

相当于是一个错误我的理解是字符串无法减去数字log结果为NAN。加号则是拼接

<script>
        console.log('pink' - 2)
    </script>

反引号模板字符串

  • 多行字符串:模板字符串可以跨越多行,而不需要使用反斜杠来转义换行符
  • 字符串插值:可以使用 ${expression} 的形式在字符串中插入变量或表达式的值。
  • 标签模板:可以使用标签模板来改变模板字符串的解析过程。
  • 方便的字符串拼接:模板字符串可以很方便的实现字符串的拼接,代替了传统的字符串拼接的麻烦方式。
<script>
        // 我叫蔡徐坤今年18岁了
        let name ='蔡徐坤'
        let age  = 18
        let str = `我叫${name}今年${age}岁了`
        // console.log(str) 我叫蔡徐坤我今年18岁了
        document.write(` 
        <h1>水果列表</h1>
    <ul>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
        <li>香蕉</li>
    </ul>`)
    </script>

布尔类型

<script>
    const flag = true
    console.log(flag) 
</script>

undefined未定义

 <script>
        // 哪几种情况会出现未定义类型
        // 只声明变量未赋值,变量默认值为undefined
        // 直接赋值undefined
        let run =undefined
        console.log(run)
        let sun 
        console.log(sun)
    </script>

null类型

  <script>
        // null代表空的
        // 将这变量的值设置为null
        let run = null
        console.log(run)
        // 现在有些程序员会将null作为为创建的对象
    </script>

检测数据类型

  • typeof 值
  • typeof()

字符串转数字类型

<script>
        let str = '1234'
        // 使用Number()
        console.log(Number(str))
        let num = '123'
        console.log( typeof(String(num)))
    </script>

parseint和parsefloat

<script>
        // 字符串转数字类型的俩种方法
        let str = '123adasd'
        console.log(parseInt(str))
        // parseInt保留整数,第一个字如果不是数字则是NAN
        let stri = '123.123px'
        console.log(parseFloat(stri))
        // 保留小数
    </script>

转字符串

  1. string()
  2. 变量.toString(进制)

转boolean

<script>
        // 0 -0 '' null undefined NaN false 都是false
        // 将字符串转换boolean 除了''会转成false其他的都是ture
        let v1 = ''
        let v2 = '-'
        console.log(Boolean(v1))
        console.log(Boolean(v2))
        // 将数字转成boolean 除了0 NAN -0 是false其他都是ture
        let srt = -1
        console.log(Boolean(srt));
        // undefined转成boolean 都是false
        let srt1 = undefined
        console.log(Boolean(srt1));
        // null转boolean 都是false
        let srt2 = null
        console.log(Boolean(srt2));
           


    </script>

隐式转换

 <script>
        let str = '12'
        console.log(12+ +str) 24
        // 直接在前面加上+-符号即可转换成功
         <script>
    //    let   str1 = +prompt('输入第一个数') 10
    //    let   str2 = +prompt('输入第二个数') 10
    //    let sun = str1 + str2 
    //    console.log(sun) 20
     </script>
    </script>

表格练习输入案例

<style>
      h1{
        text-align: center;
        margin-top: 100px;

      }
      table{
        /* 表格边框合并为一条 */
        border-collapse: collapse;
        margin: 0  auto;
        text-align: center;
        height: 80px;
      }
        table,
        th,
        td{
            border: 1px solid rgb(13, 13, 13);
        }
        th{
            padding: 10px 20px;
        }
    </style>
</head>
<body>
   
    <script>
      let name = prompt('请输入商品名称')  
      let moenky = +prompt('请输入商品价格')  
      let num = +prompt('请输入商品数量')  
    //   let sum = prompt('请输入总价') 
    let total = moenky * num
      let adderss = prompt('请输入地址')  
     document.write(`
     <h1>订单确认</h1>
    <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收货地址</th>
        </tr>
        <tr>
            <td>${name}</td>
            <td>${moenky}</td>
            <td>${num}</td>
            <td>${total}</td>
            <td>${adderss}</td>
        </tr>
    </table>
     `)
    </script>