JS基础---变量、数据类型、类型转换变量 1、变量是什么简单来说就是计算机储存数据的'容器'，它可以让计算机变的有记

变量

1、变量是什么

简单来说就是计算机储存数据的'容器'，它可以让计算机变的有记忆

作用

用来存放数据的，需要注意它指的的是容器，而不是数据

2、变量基本使用☆

声明变量

谁想要使用变量，首先要先创建变量
声明变量有两个部分组成，关键字 let（系统提供的专门用来声明变量的词语）+ 变量名（自定义命名，但是要有基本规范，起到见名知意的效果）

变量赋值

定义一个变量后，你就可以初始化它，也就是赋值（=）。获取数据的方式是通过变量名来获得变量里面的数据，而不是赋值后面的字面量

更新变量

变量赋值后，还可以通过简单地给它一个不同的值来更新它。

    <script>
        
        // 声明变量的同时存放了20这个数据
        let age = 20
        // 变量里面的数据变更为30
        age = 30 
        // 页面输出结果
        document.write(age)
    </script>

**注意 **let 是不允许多次声明一个变量

<script>
        
        // 声明变量的同时存放了20这个数据
        let age = 20
        // 这里不允许声明同一个变量
        let age = 30 
        // 输出会报错
        document.write(age)
    </script>

3、变量的本质-了解

变量是内存里的一块空间，用来存储数据。通俗点理解就是一个装东西的容器

4、变量命名规则与规范

不能用有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等
只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量
起名要带有含义，使人一看就知其义，并且尽量遵守遵守小驼峰命名法，即第一个单词首字母小写，后面每个单词首字母大写。例：userName

数据类型

既然计算机可以存储和处理大量的数据，那么我们为什么要给这些数据分类呢？

更加充分和高效的利用内存
也更加方便程序员的使用数据

1、数据类型☆

JS 数据类型整体分为以下两大类：

1、基本数据类型

Number 数字型

也就是我们数学中学习到的数字，可以是整数、小数、正数、负数，这些统一称为数字类型

String 字符串型

通过单引号（ ''）、双引号（ ""）或反引号( ` )包裹的数据都叫字符串，重点推荐使用单引号

注意事项：

无论单引号或是双引号必须成对使用

单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）

必要时可以使用转义符 \，输出单引号或双引号

    <script>
      // 早些时候 写代码 都是这样来拼接的  看起来不太直观
      
      let every = '大家好';
      let age=100;
      console.log('你好-' + every + '-世界美好');
      console.log('你好' + '-' + every + '-' + '世界美好');


      // 你好-大家好-世界美好


      // 使用 反引号的方式来拼接 字符串 推荐！！ 
      console.log(`你好-every-世界美好`);

      // 模版字符串 
      console.log(`你好-${every}-世界美好${age}`);// 变量 在反引号中 只能使用 ${every}  固定用法

      // 错误的演示
      console.log('你好-${every}-世界美好${age}'); 

      // 反引号和 ${} 两个是一对 要配套出现  。 .;..........
    </script>

boolean 布尔型

只有两种值，一个是真 true，一个是假 false

undefined 未定义型

表示没有赋值，创建了一个变量，但是里面却没有赋值，这时就会被定义undefined

null 空类型

表示创建了一个变量，赋值了，但是这个值本身就空的，与undefined 的区别是，前者是创建了变量，但是忘记了赋值。后者是，主动赋值一个为空的值

2、引用数据类型

object 对象
function 函数检测数据类型
array 数组

2、检测数据类型

当我们的代码量达到了一定的量，或者代码由外部引入时，我们无法知道变量赋值的类型，或者需要花费我们较多的时间去查找，那么此时我们可以用 typeof 关键字来检测数据类型

<script>
        let age = 20 // 数值 number
        let name = 'large' // 字符串 string
        let no = true // boolean
        let user //  未赋值 undefined
        let num = null //  对象 object

        console.log(typeof age);
        console.log(typeof name);
        console.log(typeof no);
        console.log(typeof user);
        console.log(typeof num);
    </script>

类型转换

1、为什么要类型转换

通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。例如，把字符串型转换成数字型，以方便计算

2、隐式转换

号两边只要有一个是字符串，都会把另外一个转成字符串除了+以外的算术运算符比如 - * / 等都会把数据转成数字类型

    <script>
      // 工作中 比较常用的隐式转换写法
      let num2 = '2';

      let num3 = num2 - 0; // num3 是一个数字类型
      console.log(typeof num3);

      // 最简洁的写法
      let num4 = +num2;
    </script>

3、显式转换

 <script>
     let num1 = '2134'
        // 显示转换 转成 数字类型写法
        let num2 = Number(num1)  //较为正式的写法  常用

        console.log(num2); //此时显示的就是数字 2134 本身

        // 如果num1里面不是数字，而去转换成数字类型，那么就会显示成NaN（not a number）

        // 对于其他的类型转换成数字，无非就两种情况
        //1、成功   数字本身
        //2、失败   NAN（not a number）
     
     // 显示转换的第二种写法
     
     let str = num1.toString() ; // 显示转换  常用 

      console.log( typeof  str );
     
     </script>

document.write补充

<script>
      // 可以把内容（标签） 输出到 body标签中

      // document.write("呵呵 我又来啦 😶");
      // document.write(`<h1>大标题！ <h1/>`);

      // let str =`<button>大大的按钮</button>`;

      // let str =`<input type="text" > <button>大大的按钮</button>`;

      // 反引号 还可以换行来写代码
      // 如果换行了 那么就只能使用 反引号
      // 如果不换行 用哪种引号都可以
      let str = `
        <div>
      <p>
        <button>按钮又来啦</button>
      </p>
    </div>
        `;
      document.write('<h1>11111</h1>');

      /* 
      1 document.write 可以把一个 标签形式的字符串 重新插入到body标签里
      
      2 写标签字符串的时候  
        如果要换行  只能使用 反引号
        没有换行的话 用哪种引号都可以

        只要是写标签字符串 都可以使用反引号，也叫模版字符串

      3 尽可能不要直接在 字符串里面 一个一个字母写标签
        这样的效率低 还容易出错  
        我们可以先在 body标签中 使用 快捷键生成 标签 然后再复制回去
      
       */
    </script>

案例练习 - 订单付款确认页面

 <script>
        let productName = prompt(`请输入商品名称`),productPrice = prompt(`请输入商品价格`),
        productNum = prompt(`请输入商品数量`), producTotal, adress = prompt(`请输入收获地址`)
        
        document.write(`
        <table>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</th>
            <th>收获地址</th>
        </tr>

        <tr>
            <td> ${productName}</td>
            <td> ${productPrice}元</td>
            <td> ${productNum}</td>
            <td> ${+productPrice * +productNum}元</td>
            <td> ${adress}</td>
        </tr>
    </table>
        `)
    </script>

JS基础---变量、数据类型、类型转换

变量