当前位置：网站首页>js1day(输入输出语法，数据类型,数据类型转换，var和let区别)

js1day(输入输出语法，数据类型,数据类型转换，var和let区别)

2022-07-02 09:45:00 【荻风溪畔】

输入输出语法：

输入： prompt()
输出： alert()document.write()console.log()

模板字符串（拼接字符串和变量）

符号:
 ``
 在英文输入模式下按键盘的tab键上方那个键（1左边那个键）
 内容拼接变量时，用 ${} 包住变量
示例：

        let age = "18"
        let love = `恋爱`
        let name = `${
      age}不常在`
        document.write(`<span>${
      name}抓紧谈${
      love}</span>`)  //18不常在抓紧谈恋爱

书写位置：

内联 JavaScript（写在标签语句里面）
内部 JavaScript – 写到标签上方
外部 JavaScript - 通过 src 引入html页面中，但是 <script> 标签不要写内容，否则会被忽略

<body>
    <button onclick="alert('我是你的验证码')">点我</button>
    <script> document.write("我是啥啊") document.write("<h1>document能读取html标签</h1>") </script>
</body>

var和let区别（不适用var，const优先，let其次）：

let 为了解决 var 的一些问题

var可以先使用在声明 (不合理)，用let关键字声明变量时，必须先声明再使用
var 声明过的变量可以重复声明(不合理) ，let 不允许多次声明一个变量。
var变量提升，let 声明的变量不会在作用域中被提升

使用 var 时，下面的代码不会报错。这是因为使用这个关键字声明的变量会自动提升到函数作用域
顶部：

function foo() {
     
 console.log(age); 
 var age = 26; 
} 
foo(); // undefined

之所以不会报错，是因为 ECMAScript 运行时把它看成等价于如下代码：

function foo() {
     
 var age; 
 console.log(age); 
 age = 26; 
} 
foo(); // undefined

这就是所谓的“提升”（hoist），也就是把所有变量声明都拉到函数作用域的顶部。

var 是函数作用域，let是块作用域
关键的问题在于，使用 var 操作符定义的变量会成为包含它的函数的局部变量。比如，使用 var
在一个函数内部定义一个变量，就意味着该变量将在函数退出时被销毁

function test() {
     
 var message = "hi"; // 局部变量
} 
test(); 
console.log(message); // 出错！

去掉之前的 var 操作符之后，message 就变成了全局变量。（不推荐）

function test() {
     
 message = "hi"; // 全局变量
} 
test(); 
console.log(message); // "hi"

let 跟 var 的作用差不多，但有着非常重要的区别。最明显的区别是，let 声明的范围是块作用域，
而 var 声明的范围是函数作用域。

if (true) {
     
 var name = 'Matt'; 
 console.log(name); // Matt 
} 
console.log(name); // Matt

if (true) {
     
 let age = 26; 
 console.log(age); // 26 
} 
console.log(age); // ReferenceError: age 没有定义

在这里，age 变量之所以不能在 if 块外部被引用，是因为它的作用域仅限于该块内部（‘{}’里面就是一块）。块作用域
是函数作用域的子集，因此适用于 var 的作用域限制同样也适用于 let。

全局声明
与 var 关键字不同，使用 let 在全局作用域中声明的变量不会成为 window 对象的属性（var声明的变量则会）

var name = 'Matt'; 
console.log(window.name); // 'Matt' 
let age = 26; 
console.log(window.age); // undefined

不过，let 声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续。因此，为了避免 SyntaxError，必须确保页面不会重复声明同一个变量。

const 声明:

const 的行为与 let 基本相同，唯一一个重要的区别是用它声明变量时必须同时初始化变量，且
尝试修改 const 声明的变量会导致运行时错误。

// const 声明的作用域也是块
const name = 'Matt'; 
if (true) {
     
 const name = 'Nicholas'; 
} 
console.log(name); // Matt

数据类型

js的数据类型是只有程序在运行过程中，根据等号右边的值来确定的。

JS 是弱数据类型，变量到底属于那种类型，只有赋值之后，我们才能确认
Java是强数据类型例如 int a = 3 必须是整数

js的两类数据类型：

简单数据类型：Number,String,Boolean,Undefined,Null
复杂数据类型：object

数字型（Number）

进制

在这里插入图片描述

三个特殊值

在这里插入图片描述

isNaN()

用来判断一个变量是否为非数字的类型，返回true或者false
在这里插入图片描述

var usrAge=21;
var isOk=isNaN(userAge);
console.log(isNum);        //false, 21不是一个非数字
var usrName="andy";
console.log(isNaN(userName)); //true,"andy"是一个非数字

字符串型（String）

字符串型可以是引号中的任意文本，其语法为双引号 “” 和单引号’'(更推荐单引号)

字符串转义符

字符串引号嵌套

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)
但是不可以同种引号嵌套！！

var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错，不能 单双引号搭配

字符串长度（length）

通过字符串的 length 属性可以获取整个字符串的长度。（注意空格算一个字符）

    var strMsg = "这是啥";
    alert(strMsg.length); // 显示 3

字符串拼接

字符串 + 任何类型 = 拼接之后的新字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12);     // 1112

Undefined和Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）

var variable;
console.log(variable);           // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   // NaN

一个声明变量给 null 值，里面存的值为空（null是一个object型)

var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   // 1

获取检测变量的数据类型（typeof）

typeof可用来获取检测变量的数据类型

var num = 18;
console.log(typeof num) // 结果 number

数据类型转换

转换为字符串

在这里插入图片描述

转换为数字型（重点）

在这里插入图片描述

    console.log(parseInt("120px"));   //120 去掉了px单位
    console.log(parseInt("rem120px"));   //NaN
    console.log('12' - 10);   //2

注意 parseInt 和 parseFloat 单词的大小写，这2个是重点
隐式转换是我们在进行算数运算的时候，JS 自动转换了数据类型

转换为布尔型

在这里插入图片描述

代表空、否定的值会被转换为 false ，如 ‘’、0、NaN、null、undefined
其余值都会被转换为 true

解释型语言和编译型语言

在这里插入图片描述

用户订单信息案例

<!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; padding: 0; } table {
       margin: 0 auto; text-align: center; border-collapse: collapse; } table th, td {
       border: 1px solid #000; padding: 15px; } table caption {
       margin: 15px 0; } </style>
</head>

<body>
    <script> let price = prompt("price:") //1999 let num = prompt("num:") //3 let address = prompt("address:") //港珠澳大桥桥洞下 let total = price * num document.write(` <table> <caption> <h2>订单付款确认界面</h2> </caption> <tr> <th>商品名称</th> <th>商品价格</th> <th>商品数量</th> <th>总价</th> <th>收货地址</th> </tr> <tr> <td>华为mate40pro</td> <td class="price">${
        price}元</td> <td class="num">${
        num}</td> <td class="total">${
        total}元</td> <td class="address">${
        address}</td> </tr> </table>`) </script>
</body>

</html>