了解變量、數(shù)據(jù)類型、運(yùn)算符等基礎(chǔ)概念，能夠?qū)崿F(xiàn)數(shù)據(jù)類型的轉(zhuǎn)換，結(jié)合四則運(yùn)算體會(huì)如何編程。
JavaScript介紹
變量
常量
數(shù)據(jù)類型
運(yùn)算符
實(shí)戰(zhàn)案例
重點(diǎn)單詞：
js介紹
能說出JavaScript 是什么? 怎么寫?
能寫出JavaScript 輸入和輸出語句
js是什么？
是什么？
是一種運(yùn)行在客戶端（瀏覽器）的編程語言，可以用來創(chuàng)建動(dòng)態(tài)更新的內(nèi)容，控制多媒體，制作圖像動(dòng)畫等交互效果
怎么寫?
JavaScript 程序不能獨(dú)立運(yùn)行，它需要被嵌入 HTML 中，然后瀏覽器才能執(zhí)行 JavaScript 代碼。通過 script 標(biāo)簽將 JavaScript 代碼引入到 HTML 中，有兩種方式：
內(nèi)部方式
通過 script 標(biāo)簽包裹 JavaScript 代碼
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
<!-- 內(nèi)聯(lián)形式：通過 script 標(biāo)簽包裹 JavaScript 代碼 -->
<script>
alert('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')
</script>
</body>
</html>
外部形式
一般將 JavaScript 代碼寫在獨(dú)立的以 .js 結(jié)尾的文件中，然后通過 script 標(biāo)簽的 src 屬性引入
// demo.js
document.write('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
<!-- 外部形式：通過 script 的 src 屬性引入獨(dú)立的 .js 文件 -->
<scriptsrc="demo.js"></script>
</body>
</html>
如果 script 標(biāo)簽使用 src 屬性引入了某 .js 文件，那么 標(biāo)簽的代碼會(huì)被忽略?。。∪缦麓a所示：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 引入方式</title>
</head>
<body>
<!-- 外部形式：通過 script 的 src 屬性引入獨(dú)立的 .js 文件 -->
<scriptsrc="demo.js">
// 此處的代碼會(huì)被忽略掉?。。。?/p>
? alert(666);
</script>
</body>
</html>
注釋和結(jié)束符
通過注釋可以屏蔽代碼被執(zhí)行或者添加備注信息，JavaScript 支持兩種形式注釋語法：
單行注釋
使用 // 注釋單行代碼
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 注釋</title>
</head>
<body>
<script>
// 這種是單行注釋的語法
// 一次只能注釋一行
// 可以重復(fù)注釋
document.write('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！');
</script>
</body>
</html>
多行注釋
使用 /* */ 注釋多行代碼
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 注釋</title>
</head>
<body>
<script>
/* 這種的是多行注釋的語法 */
/*
? ? 更常見的多行注釋是這種寫法
? ? 在些可以任意換行
? ? 多少行都可以
? ?? */
document.write('嗨，歡迎來傳智播學(xué)習(xí)前端技術(shù)！')
</script>
</body>
</html>
注：編輯器中單行注釋的快捷鍵為 ctrl + /
結(jié)束符
在 JavaScript 中 ; 代表一段代碼的結(jié)束，多數(shù)情況下可以省略 ; 使用回車（enter）替代。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 結(jié)束符</title>
</head>
<body>
<script>
alert(1);
alert(2);
alert(1)
alert(2)
</script>
</body>
</html>
實(shí)際開發(fā)中有許多人主張書寫 JavaScript 代碼時(shí)省略結(jié)束符 ;
輸入和輸出語句
輸出和輸入也可理解為人和計(jì)算機(jī)的交互，用戶通過鍵盤、鼠標(biāo)等向計(jì)算機(jī)輸入信息，計(jì)算機(jī)處理后再展示結(jié)果給用戶，這便是一次輸入和輸出的過程。
輸出語句
// 1. 輸出語句
//? 1.1 alert 頁面彈出警示框
// alert('你好,js')
// 1.2 document.write 向頁面文檔輸入內(nèi)容 顯示到頁面body標(biāo)簽之內(nèi), 可以正常的解析標(biāo)簽
document.write('今日特價(jià)')
document.write('<h4>今日特價(jià)</h4>')
// 1.3 console.log 給我們程序員調(diào)試使用的 ? console 控制臺(tái)
console.log('給咱們程序員使用的')
輸入語句
向 prompt() 輸入任意內(nèi)容會(huì)以彈窗形式出現(xiàn)在瀏覽器中，一般提示用戶輸入一些內(nèi)容。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 輸入輸出</title>
</head>
<body>
<script>
// 1. 輸入的任意數(shù)字，都會(huì)以彈窗形式展示
document.write('要輸出的內(nèi)容')
alert('要輸出的內(nèi)容');
// 2. 以彈窗形式提示用戶輸入姓名，注意這里的文字使用英文的引號(hào)
prompt('請(qǐng)輸入您的姓名:')
</script>
</body>
</html>
變量
變量是什么&基本使用
理解變量是計(jì)算機(jī)存儲(chǔ)數(shù)據(jù)的“容器”，掌握變量的聲明方式
變量是計(jì)算機(jī)中用來存儲(chǔ)數(shù)據(jù)的“容器”，變量不是數(shù)據(jù)本身，它們僅僅是一個(gè)用于存儲(chǔ)數(shù)值的容器。可以理解為是一個(gè)個(gè)用來裝東西的紙箱子。
聲明
聲明(定義)變量有兩部分構(gòu)成：聲明關(guān)鍵字、變量名（標(biāo)識(shí)）
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 聲明和賦值</title>
</head>
<body>
<script>
// let 變量名
// 聲明(定義)變量有兩部分構(gòu)成：聲明關(guān)鍵字、變量名（標(biāo)識(shí)）
// let 即關(guān)鍵字，所謂關(guān)鍵字是系統(tǒng)提供的專門用來聲明（定義）變量的詞語
// age 即變量的名稱，也叫標(biāo)識(shí)符
letage
</script>
</body>
</html>
關(guān)鍵字是 JavaScript 中內(nèi)置的一些英文詞匯（單詞或縮寫），它們代表某些特定的含義，如 let 的含義是聲明變量的，看到 let? 后就可想到這行代碼的意思是在聲明變量，如 let age;
let 和 var 都是 JavaScript 中的聲明變量的關(guān)鍵字，推薦使用 let 聲明變量?。?！
賦值
聲明（定義）變量相當(dāng)于創(chuàng)造了一個(gè)空的“容器”，通過賦值向這個(gè)容器中添加數(shù)據(jù)。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 聲明和賦值</title>
</head>
<body>
<script>
// 聲明(定義)變量有兩部分構(gòu)成：聲明關(guān)鍵字、變量名（標(biāo)識(shí)）
// let 即關(guān)鍵字，所謂關(guān)鍵字是系統(tǒng)提供的專門用來聲明（定義）變量的詞語
// age 即變量的名稱，也叫標(biāo)識(shí)符
letage
// 賦值，將 18 這個(gè)數(shù)據(jù)存入了 age 這個(gè)“容器”中
age=18
// 這樣 age 的值就成了 18
document.write(age)
// 也可以聲明和賦值同時(shí)進(jìn)行
letstr='hello world!'
alert(str);
</script>
</body>
</html>
變量更新
變量賦值后，還可以通過簡單地給它一個(gè)不同的值來更新它。
// 1.更新變量
letage=18
age=19
// 注意: 不要多次聲明同一個(gè)變量
// let age = 19
console.log(age)
聲明多個(gè)變量
語法：多個(gè)變量中間用逗號(hào)隔開。
說明：看上去代碼長度更短，但并不推薦這樣。為了更好的可讀性，一般情況下我們一行只聲明一個(gè)變量。
// 2. 一次聲明多個(gè)變量的簡寫方式 (了解 能認(rèn)出來就可以了)
// let uname = 'pink老師', sex = '男'
letuname='pink老師'
letsex='男'
console.log(uname,sex)
let 和 var 區(qū)別
在較舊的JavaScript，使用關(guān)鍵字 var 來聲明變量 ，而不是 let
var 現(xiàn)在開發(fā)中一般不再使用它，只是我們可能再老版程序中看到它。
let 為了解決 var 的一些問題。
var 聲明一些不合理的地方：
可以先使用 在聲明 (不合理)
var 聲明過的變量可以重復(fù)聲明(不合理)
比如變量提升、全局變量、沒有塊級(jí)作用域等等
結(jié)論：
var 就是個(gè)bug，別迷戀它了，以后聲明變量我們統(tǒng)一使用 let
變量的本質(zhì)
內(nèi)存：計(jì)算機(jī)中存儲(chǔ)數(shù)據(jù)的地方，相當(dāng)于一個(gè)空間
變量本質(zhì)：是程序在內(nèi)存中申請(qǐng)的一塊用來存放數(shù)據(jù)的小空間
變量名命名規(guī)則
關(guān)于變量的名稱（標(biāo)識(shí)符）需要遵守：
規(guī)則：
只能是字母、數(shù)字、下劃線、$，且不能能數(shù)字開頭
字母區(qū)分大小寫，如 Age 和 age 是不同的變量
JavaScript 內(nèi)部已占用于單詞（關(guān)鍵字或保留字）不允許使用
盡量保證變量具有一定的語義，見字知義
規(guī)范：
起名要有意義
遵守小駝峰命名法
第一個(gè)單詞首字母小寫，后面每個(gè)單詞首字母大寫。例：userName
// 1. 規(guī)則(法律)
// 1.1 變量名不能是關(guān)鍵字
// let let = 10
// 1.2 變量名的組成: 英文字母 數(shù)字 _? $ ，不能以數(shù)字開頭
// let 1num = 10 錯(cuò)誤
// let num! = 10 錯(cuò)誤
// 1.3 js嚴(yán)格區(qū)分大小寫
// let age = 18
// console.log(Age)
// 2. 規(guī)范(道德)
// 2.1 起名要有意義
// let age = 18
// let nl = 19
// 2.2 我們命名建議采取小駝峰命名法
letmyName='pink老師'
letmyFirstName='p'
常量
是什么：也是一個(gè)容器，用于保存數(shù)據(jù)的
和變量的區(qū)別： 常量里面保存的值是不允許改變的
使用場(chǎng)景：當(dāng)某個(gè)值永遠(yuǎn)不會(huì)改變的時(shí)候，我們可以使用常量來保存，目的為了程序的安全
// 常量： 也是一個(gè)容器用來保存的數(shù)據(jù)
constpi=3.14
console.log(pi)
// 注意事項(xiàng)：
// 1. 常量里面的值是不允許修改的
pi=3.141592653
console.log(pi)
// 2. 常量必須要初始化(聲明常量的時(shí)候必須要賦值)
// const url
注意： 常量不允許重新賦值,聲明的時(shí)候必須賦值（初始化）
數(shù)據(jù)類型
計(jì)算機(jī)世界中的萬事成物都是數(shù)據(jù)。
生活中會(huì)把物品進(jìn)行歸類，不同的物品不能混淆在一起。
計(jì)算機(jī)程序可以處理大量的數(shù)據(jù)，方便程序員的使用數(shù)據(jù)。
數(shù)字型和字符串型
數(shù)字型：
即我們數(shù)學(xué)中學(xué)習(xí)到的數(shù)字，可以是整數(shù)、小數(shù)、正數(shù)、負(fù)數(shù)
通過typeof關(guān)鍵字檢測(cè)數(shù)據(jù)類型
字符串：
被引號(hào)包裹的一段文字信息
JS中的字符串:
通過單引號(hào)（ ‘’） 、雙引號(hào)（ “”）或反引號(hào)( `` ) 包裹的數(shù)據(jù)都屬于字符串
單引號(hào)和雙引號(hào)沒有本質(zhì)上的區(qū)別，推薦使用單引號(hào)。
注意事項(xiàng)：
單引號(hào)/雙引號(hào)可以互相嵌套，但是不以自已嵌套自已（口訣：外雙內(nèi)單，或者外單內(nèi)雙）
一定注意變量名不要加引號(hào)，否則認(rèn)為是字符串
// 1. 數(shù)字型： 用于計(jì)算的， js數(shù)字類型包含： 整數(shù)、小數(shù)
// let num1 = 18
// let num1 = -18
letnum1=18.88
// let num1 = -18.88
console.log(typeofnum1)// number ? typeof 關(guān)鍵字檢測(cè)數(shù)據(jù)類型
// 2. 字符串類型: 被引號(hào)包裹的一段文字信息 ? 單引號(hào) 雙引號(hào)? 反引號(hào)
letgoods='筆記本電腦'
letaddress="黑馬程序員"
console.log(typeofgoods)// string
console.log(typeofaddress)// string
letcolor=`粉紅色`
lettel='13612342234'
// 2.1 變量是不能加引號(hào)的,變量加了引號(hào)就不是盒子了，是一個(gè)字符串
console.log('goods')
// 2.2 字符串嵌套的問題. 不能嵌套自己, 外單內(nèi)雙? 或者 外雙內(nèi)單
console.log('今日特價(jià)"跳樓大甩賣"速速搶購')
console.log("今日特價(jià)'跳樓大甩賣'速速搶購")
模板字符串
使用場(chǎng)景:
拼接字符串和變量
語法
// 1. 字符串拼接
letage=91
// console.log('pink老師今年' + age + '歲')
console.log('pink老師今年'+age+'歲')
// 2. 模板字符串
console.log(`pink老師今年${age}歲`)
// 3. 模板字符串里面的字符串可以換行
注意：反引號(hào)中間的字符串可以換行的
布爾類型
表示肯定或否定時(shí)在計(jì)算機(jī)中對(duì)應(yīng)的是布爾類型數(shù)據(jù)，它有兩個(gè)固定的值 true 和 false，表示肯定的數(shù)據(jù)用 true，表示否定的數(shù)據(jù)用 false。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 數(shù)據(jù)類型</title>
</head>
<body>
<script>
//? pink老師帥不帥？回答 是 或 否
letisCool=true// 是的，摔死了！
isCool=false// 不，套馬桿的漢子！
document.write(typeofisCool)// 結(jié)果為 boolean
</script>
</body>
</html>
undefined
未定義是比較特殊的類型，只有一個(gè)值 undefined，只聲明變量，不賦值的情況下，變量的默認(rèn)值為 undefined，一般很少【直接】為某個(gè)變量賦值為 undefined。
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>JavaScript 基礎(chǔ) - 數(shù)據(jù)類型</title>
</head>
<body>
<script>
// 只聲明了變量，并末賦值
lettmp;
document.write(typeoftmp)// 結(jié)果為 undefined
</script>
</body>
</html>
注：JavaScript 中變量的值決定了變量的數(shù)據(jù)類型。
運(yùn)算符
算術(shù)運(yùn)算符
數(shù)字是用來計(jì)算的，比如：乘法 * 、除法 / 、加法 + 、減法 - 等等，所以經(jīng)常和算術(shù)運(yùn)算符一起。
算術(shù)運(yùn)算符：也叫數(shù)學(xué)運(yùn)算符，主要包括加、減、乘、除、取余（求模）等
運(yùn)算符作用
+求和
-求差
*求積
/求商
%取模（取余數(shù)），開發(fā)中經(jīng)常用于作為某個(gè)數(shù)字是否被整除
注意：在計(jì)算失敗時(shí)，顯示的結(jié)果是 NaN （not a number）
// 算術(shù)運(yùn)算符
console.log(1+2*3/2)//? 4
letnum=10
console.log(num+10)// 20
console.log(num+num)// 20
// 1. 取模(取余數(shù))? 使用場(chǎng)景：? 用來判斷某個(gè)數(shù)是否能夠被整除
console.log(4%2)//? 0 ?
console.log(6%3)//? 0
console.log(5%3)//? 2
console.log(3%5)//? 3
// 2. 注意事項(xiàng) : 如果我們計(jì)算失敗，則返回的結(jié)果是 NaN (not a number)
console.log('pink老師'-2)
console.log('pink老師'*2)
console.log('pink老師'+2)// pink老師2
賦值運(yùn)算符
賦值運(yùn)算符：對(duì)變量進(jìn)行賦值的運(yùn)算符
=? ? 將等號(hào)右邊的值賦予給左邊, 要求左邊必須是一個(gè)容器
運(yùn)算符作用
+=加法賦值
-+減法賦值
*=乘法賦值
/=除法賦值
%=取余賦值
// 賦值運(yùn)算符
letnum=1
// 1. 需求 我們想要num變量里面的值 + 1， 加完之后再把計(jì)算結(jié)果存到num里面
// num = num + 1
// console.log(num)
// 2. += 賦值運(yùn)算符
num+=1// 當(dāng)前情況下是等價(jià)于? num = num + 1
console.log(num)
自增/自減運(yùn)算符
符號(hào)作用說明
++自增變量自身的值加1，例如: x++
--自減變量自身的值減1，例如: x--
++在前和++在后在單獨(dú)使用時(shí)二者并沒有差別，而且一般開發(fā)中我們都是獨(dú)立使用
++在后（后綴式）我們會(huì)使用更多
注意：
只有變量能夠使用自增和自減運(yùn)算符
++、-- 可以在變量前面也可以在變量后面，比如: x++? 或者? ++x
就是++在前面就是先計(jì)算，后++就是先取值
// 1. 自增運(yùn)算符： 可以讓變量里面的值加1
// let x = 3
// // x++ ? // x = x + 1 或者? x += 1
// ++x
// console.log(x)
// 2. ++在前和++在后的區(qū)別。 如果單獨(dú)使用，沒有區(qū)別，如果參與了運(yùn)算就有區(qū)別
// 2.1 ++在前? 前綴式 ： 先對(duì)變量值+1， 然后拿著變量值做運(yùn)算
// let x = 3
// let y = ++x
// console.log(y) // 4
// console.log(x) // 4
// 2.2 ++在后 后綴式 ： 先拿著變量值運(yùn)算，再對(duì)變量值+1
letx=3
lety=x++
console.log(y)// 3
console.log(x)// 4
比較運(yùn)算符
使用場(chǎng)景：比較兩個(gè)數(shù)據(jù)大小、是否相等，根據(jù)比較結(jié)果返回一個(gè)布爾值（true / false）
運(yùn)算符作用
>左邊是否大于右邊
<左邊是否小于右邊
>=左邊是否大于或等于右邊
<=左邊是否小于或等于右邊
===左右兩邊是否類型和值都相等（重點(diǎn)）
==左右兩邊值是否相等
!=左右值不相等
!==左右兩邊是否不全等
// 比較運(yùn)算符： 根據(jù)比較結(jié)果返回 布爾值 true / false
console.log(3>5)// false
console.log(3<5)// true
console.log(3>=5)//? false
console.log(3>=3)// true
console.log(3<=5)// true
// console.log(3 = 3)? // 錯(cuò)誤
// 1. 判斷是否相等我們使用 ===? 要求 值 和 數(shù)據(jù)類型都相等返回的結(jié)果才是true,提倡使用三等? 全等
console.log(3===3)// true
console.log(3==='3')//? false
console.log(3!==3)// false
console.log(3!=='3')// true
// 2. == 判斷是否相等，使用較少, 判斷值是否相等，并不判斷數(shù)據(jù)類型是否相等
console.log(3==3)// true
console.log(3=='3')//? true
console.log(3!=3)// false
邏輯運(yùn)算符
使用場(chǎng)景：可以把多個(gè)布爾值放到一起運(yùn)算，最終返回一個(gè)布爾值
符號(hào)名稱日常讀法特點(diǎn)口訣
&&邏輯與并且符號(hào)兩邊有一個(gè)假的結(jié)果為假一假則假
||邏輯或或者符號(hào)兩邊有一個(gè)真的結(jié)果為真一真則真
!邏輯非取反true變false? false變true真變假，假變真
ABA && BA || B!A
falsefalsefalsefalsetrue
falsetruefalsetruetrue
truefalsefalsetruefalse
truetruetruetruefalse
// 邏輯運(yùn)算符:? 邏輯與 &&? 邏輯或 ||? 邏輯非 !
// 1.邏輯與 &&? 一假則假
console.log(false&&false)// false
console.log(false&&true)// false
console.log(true&&false)// false
console.log(true&&true)// true
console.log(3>5&&2<4)// false
// 判斷某個(gè)數(shù)字是否在 8096到36999 之間： 數(shù)字大于等于 8096 并且小于等于36999
letnum=1000
console.log(num>=8096&&num<=36999)// false
console.log('------')
// 2. 邏輯或 || ? 一真則真
console.log(true||false)// true
console.log(false||true)// true
console.log(true||true)// true
console.log(false||false)// false
console.log('------')
// 3. 邏輯非 取反
console.log(!false)// true
console.log(!true)// false
運(yùn)算符優(yōu)先級(jí)
邏輯運(yùn)算符優(yōu)先級(jí)： ！> && >? ||?
綜合案例
需求：用戶輸入商品價(jià)格和商品數(shù)量，以及收貨地址，可以自動(dòng)打印訂單信息
分析：
①：輸入數(shù)據(jù)
? ? ? 需要輸入3個(gè)數(shù)據(jù)，所以需要3個(gè)變量來存儲(chǔ)? 價(jià)格 price、數(shù)量 num、地址 address
②：處理數(shù)據(jù)
? ? 需要計(jì)算總的價(jià)格保存變量：總計(jì) total? = price *? num
③：輸出數(shù)據(jù)
? ? ? 頁面打印生成表格，里面填充數(shù)據(jù)，使用模板字符串
完整代碼：
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>綜合案例-商品訂單信息頁面</title>
<style>
.title{
text-align:center;
color:#3e3e3e;
?? }
.order{
/* 合并相鄰邊框 */
border-collapse:collapse;
height:80px;
margin:0auto;
text-align:center;
border-radius:10px10px00;
overflow:hidden;
?? }
/* 給行添加漸變背景顏色 */
.ordertr:nth-child(1) {
background-image:linear-gradient(toright,#f46e33,#f057a5);
?? }
.ordertr:nth-child(2) {
background-image:linear-gradient(toright,#fdf0eb,#fdeff6);
?? }
.ordertr:nth-child(2) :last-child{
color:#f282bb;
?? }
.orderth{
padding:5px50px;
color:#fff;
?? }
.order,
th,
td{
border:1pxsolid#fff;
line-height:50px;
?? }
</style>
</head>
<body>
<h2class="title">訂單詳情頁面</h2>
<script>
// 1. 輸入數(shù)據(jù)
letprice=prompt('請(qǐng)你輸入商品單價(jià):')
letnum=prompt('請(qǐng)您輸入商品數(shù)量:')
letaddress=prompt('請(qǐng)您輸入收貨地址:')
// 2. 處理數(shù)據(jù)
lettotal=price*num// 計(jì)算總價(jià)
// alert(total)
// 3. 輸出數(shù)據(jù)
document.write(`
<table class="order">
<tr>
<th>商品名稱</th>
<th>商品價(jià)格</th>
<th>商品數(shù)量</th>
<th>總價(jià)</th>
<th>收貨地址</th>
</tr>
<tr>
<td>小米青春版PLUS</td>
<td>${price}元</td>
<td>${num}</td>
<td>${total}元</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>
