当前位置： 首页 > news >正文

JavaScript介绍-变量、常量、数据类型、类型转换

news 来源：原创 2025/5/3 6:48:10

一、介绍

1.JavaScript介绍

⑴. JavaScript 是什么

JavaScript  是一种运行在客户端(浏览器)的编程语言,实现人机交互效果｡

⑵. 作用（做什么？）

– 网页特效 (监听用户的一些行为让网页作出对应的反馈)

– 表单验证 (针对表单数据的合法性进行判断)

– 数据交互 (获取后台的数据, 渲染到前端)

– 服务端编程 (node.js)

⑶.JavaScript的组成(有什么?)

ECMAScript:

规定了js基础语法核心知识。

比如：变量、分支语句、循环语句、对象等等 

Web APIs : 

DOM 操作文档，比如对页面元素进行移动、大小、添加删除等操作

BOM 操作浏览器，比如页面弹窗，检测窗口宽度、存储数据到浏览器等等

权威网站： MDN

JavaScript权威网站：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 

2. JavaScript 书写位置

目标:知道如何向页面添加 JavaScript


⑴. 内部 JavaScript

直接写在html文件里,用script标签包住

规范:script标签写在</body>上面

拓展: alert(‘你好,js’) 页面弹出警告对话框

<!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>Document</title>
</head>

<body>
  <!-- 内部js -->
  <script>
    // 页面弹出警示框
    alert('你好，js~')
  </script>
</body>

</html>

运行结果:

注意事项

我们将 <script> 放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的 顺序加载 如果先加载的 JavaScript 期望修改其下方的 HTML,那么它可能由于 HTML 尚未被加载而失效｡ 因此,将 JavaScript 代码放在 HTML页面的底部附近通常是最好的策略｡

⑵. 外部 JavaScript

代码写在以.js结尾的文件里

语法:通过script标签,引入到html页面中｡

注意事项:

1. script标签中间无需写代码,否则会被忽略!

2. 外部JavaScript会使代码更加有序，更易于复用，且没有了脚本的混合，HTML 也会更加易读，因此这是个好的习惯。

如果 script 标签使用 src 属性引入了某 .js 文件，那么 标签的代码会被忽略！！！如下代码所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript 基础 - 引入方式</title>
</head>
<body>
  <!-- 外部形式：通过 script 的 src 属性引入独立的 .js 文件 -->
  <script src="demo.js">
    // 此处的代码会被忽略掉！！！！
  	alert(666);  
  </script>
</body>
</html>

⑶.内联 JavaScript

代码写在标签内部 

语法：

注意： 此处作为了解即可，但是后面vue框架会用这种模式

3. JavaScript 注释

目标：会使用两种JavaScript注释方法

单行注释

符号：// 

作用：//右边这一行的代码会被忽略 

快捷键：ctrl + /

块注释

符号：/* */ 

作用：在/* 和 */ 之间的所有内容都会被忽略

快捷键：shift + alt + A

4.JavaScript 结束符

目标：了解JavaScript结束符

结束符

Ø 作用： 使用英文的 ; 代表语句结束

Ø 实际情况： 实际开发中，可写可不写, 浏览器(JavaScript 引擎) 可以自动推断语句的结束位置

Ø 现状： 在实际开发中，越来越多的人主张，书写 JavaScript 代码时省略结束符

Ø 约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求.）

5.JavaScript 输入输出语法

目标：能写出常见 JavaScript 输入输出语法

输出和输入也可理解为人和计算机的交互，用户通过键盘、鼠标等向计算机输入信息，计算机处理后再展示结果给用 户，这便是一次输入和输出的过程。

输出语法：

语法1：

作用：向body内输出内容

注意：如果输出的内容写的是标签，也会被解析成网页元素

语法2：

作用：页面弹出警告对话框

语法3：

作用：控制台输出语法，程序员调试使用

<!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>Document</title>
</head>

<body>

  <script>
    // 1. 文档输出内容
    document.write('我是div标签')
    document.write('<h1>我是标题</h1>')

    // 2. 控制台打印输出 给 程序员
    console.log('看看对不对')
    console.log('日志')

    // 3. 输入语句
    prompt('请输入您的年龄：')
  </script>
</body>

</html>

6.字面量

目标：能说出什么是字面量

在计算机科学中，字面量（literal）是在计算机中描述 事/物

比如：

我们工资是： 1000 此时 1000 就是 数字字面量

'程序员' 字符串字面量

还有接下来我们学的 [] 数组字面量 {} 对象字面量 等等

二、变量

1.变量是什么?

问题1:用户输入的数据我们如何存储起来?

答案1:变量

目标:理解变量是计算机存储数据的“容器”

白话：变量就是一个装东西的盒子。

通俗：变量是计算机中用来存储数据的“容器”，它可以让计算机变得有记忆。 

注意：变量不是数据本身，它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。 

2.变量的基本使用

1. 声明变量：

要想使用变量，首先需要创建变量（也称为声明变量或者定义变量）

语法：

Ø 声明变量有两部分构成：声明关键字、变量名（标识）

Ø let 即关键字 (let: 允许、许可、让、要)，所谓关键字是系统提供的专门用来声明（定义）变量的词语

举例：

Ø 我们声明了一个age变量

Ø age 即变量的名称，也叫标识符

2. 变量赋值:

定义了一个变量后,你就能够初始化它(赋值)｡在变量名之后跟上一个“=”,然后是数值｡

注意:是通过变量名来获得变量里面的数据

3. 更新变量：

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

3.案例

⑴ 变量案例-弹出姓名

需求： 浏览器中弹出对话框： 请输入姓名， 页面中输出：刚才输入的姓名

分析：

①：输入：用户输入框：prompt()

②：内部处理：保存数据

③：输出： 页面打印 document.write(）

<!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>Document</title>
</head>

<body>
  <script>
    // 输出用户名案例
    // 1. 用户输入
    // prompt('请输入姓名')
    // 2. 内部处理保存数据
    let uname = prompt('请输入姓名')
    // 3. 打印输出
    document.write(uname)
  </script>
</body>

</html>

注意：在 JavaScript 中，prompt() 函数接收用户输入后，返回的是字符串（string）类型的数据。

⑵.变量案例- 交换变量的值

需求：
有2个变量： num1 里面放的是 10， num2 里面放的是20
最后变为 num1 里面放的是 20 ， num2 里面放的是 10
目的：


1. 练习变量的使用
2. 为了后面冒泡排序做准备

<!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>Document</title>
</head>

<body>
  <script>
    // let if = 10
    let num1 = '老师'
    let num2 = '戚薇'
    let temp
    // 都是把右边给左边
    temp = num1
    num1 = num2
    num2 = temp
    console.log(num1, num2)
  </script>
</body>

</html>

4.变量的本质

目标：能够说出变量的本质是什么
内存：计算机中存储数据的地方，相当于一个空间
变量本质：是程序在内存中申请的一块用来存放数据的小空间

5.变量命名规则与规范

目标：能写出符合规范的变量名
规则：必须遵守，不遵守报错 (法律层面)
规范：建议，不遵守不会报错，但不符合业内通识 （道德层面）

⑴ 规则：

不能用关键字
      关键字：有特殊含义的字符，JavaScript 内置的一些英语词汇。例如：let、var、if、for等只能用下划线、字母、数字、$组成，且数字不能开头
字母严格区分大小写，如 Age 和 age 是不同的变量

⑵. 规范：

起名要有意义
遵守小驼峰命名法
    第一个单词首字母小写，后面每个单词首字母大写。例：userName

6. 变量拓展-let和var的区别

let 和 var 区别:

在较旧的JavaScript,使用关键字 var 来声明变量 ,而不是 let｡

var 现在开发中一般不再使用它,只是我们可能再老版程序中看到它｡

let 为了解决 var 的一些问题｡

var 声明:

可以先使用 在声明 (不合理)

var 声明过的变量可以重复声明(不合理) 

比如变量提升、全局变量、没有块级作用域等等

结论： var 就是个bug，别迷恋它了，以后声明变量我们统一使用 let

7.变量拓展-数组

数组 (Array) —— 一种将 一组数据存储在单个变量名下 的优雅方式

⑴.数组的基本使用

语法：使用 []（中括号）声明数组字面量。

let 数组名 = [数据1, 数据2, ..., 数据n];

示例：

let days = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'];
let nums = [10, 20, 30];

⑵.数组的取值与索引

  • 索引（下标）：数组中元素的编号，从 0 开始。

  • 取值语法：数组名[索引]

console.log(days[0]);    // 输出：'星期一'
console.log(days[6]);    // 输出：'星期日'

  • 注意：索引超出范围时返回 undefined。

⑶.数组的术语

  • 元素：数组中保存的每个数据（如 '星期一'、10）。

  • 长度：数组中元素的总数，通过 数组名.length 获取。

  • 下标:数组中数据的编号

console.log(days.length); // 输出：7

三、常量

1. 常量的概念

  • 定义：使用 const 声明的变量称为“常量”，其值在声明后 不可被修改。

  • 作用：用于存储程序中 不需要改变的数据，提高代码可读性和安全性。

  • 本质：常量是内存中的一块固定空间，存储的值不可重新赋值。

2. 常量的声明与初始化

  • 语法：声明时必须直接赋值（初始化），否则会报错。

const 常量名 = 值;

示例：

const PI = 3.14;        // 正确：声明并初始化
const MAX_SIZE = 100;   // 正确：通常用大写命名常量
// const G;             // 错误：未初始化！

3. 常量的命名规范

  • 规则：与变量命名规则一致：

    • 由字母、数字、_ 或 $ 组成，且不能以数字开头。

    • 严格区分大小写（如 AGE 和 age 不同）。

    • 不能使用 JavaScript 关键字（如 let、if）。

  • 推荐风格：

    • 全大写 + 下划线分隔（如 USER_ROLE）。

    • 明确命名，体现常量用途（如 TAX_RATE）。

4. 常量的使用场景

  1. 固定值：如数学常数、配置参数。

const TAX_RATE = 0.1;    // 税率固定为10%
const API_KEY = 'abc123'; // API密钥

     2.对象或数组的引用：常量指向的引用不可变，但内容可修改（需注意）。

const COLORS = ['red', 'green'];
COLORS.push('blue');     // 允许：修改数组内容
// COLORS = ['yellow'];  // 报错：不可重新赋值

5. 常量与变量的区别

特性常量 (const)变量 (let)
声明时初始化必须可选
重新赋值❌ 禁止✅ 允许
重复声明❌ 禁止❌ 禁止
作用域块级作用域块级作用域

6. 常见错误与注意事项

⑴.未初始化：

const PI;  // 报错：Uncaught SyntaxError: Missing initializer

⑵.重新赋值

const PI = 3.14;
PI = 3.1415;  // 报错：Uncaught TypeError: Assignment to constant

⑶.重复声明：

const AGE = 18;
const AGE = 20; // 报错：Identifier 'AGE' has already been declared

四、 数据类型

1. 数据类型分类

JavaScript 数据类型分为 基本数据类型 和 引用数据类型：

  • 基本数据类型（原始类型）：

    • number：数字型（整数、小数、正负数）

    • string：字符串型（文本）

    • boolean：布尔型（true/false）

    • undefined：未定义型（变量未赋值时的默认值）

    • null：空类型（表示“无”或“空”）

  • 引用数据类型：

    • object：对象（如数组、函数、日期等）

注意事项：

JS 是弱数据类型,变量到底属于那种类型,只有赋值之后,我们才能确认

Java是强数据类型 例如 int a = 3 必须是整数

2. 基本数据类型详解

⑴.数字型（number）

  • 特点：

    • 包含整数、小数、正负数。

    • 科学计数法：let num = 5e5; // 500000

    • 特殊值 NaN（Not a Number）：表示非数字，如 'abc' - 10。

let age = 18;          // 整数
let price = 88.99;     // 小数
let num = -10;         // 负数

特殊值：

  • NaN：表示非数字（如字符串转换失败时）。

NaN 代表一个计算错误｡它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN 是粘性的｡任何对 NaN 的操作都会返回 NaN

数字可以有很多操作,比如,乘法 * ､除法 / ､加法 + ､减法 - 等等,所以经常和算术运算符一起｡

数学运算符也叫算术运算符,主要包括加､减､乘､除､取余(求模)｡

<!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>Document</title>
</head>

<body>
  <script>
    // js 弱数据类型的语言 只有当我们赋值了，才知道是什么数据类型
    // let num = 'pink'
    // let num = 10.11
    // console.log(num)
    console.log(1 + 1)
    console.log(1 * 1)
    console.log(1 / 1)
    console.log(4 % 2) // 求余数
    console.log(5 % 3) // 求余数  2 
    console.log(3 % 5) // 求余数  3 
    // java 强数据类型的语言    int num = 10

    console.log('pink老师' - 2)
    console.log(NaN - 2)
    console.log(NaN + 2)
    console.log(NaN / 2)
    console.log(NaN === NaN)
  </script>
</body>

</html>

⑵. 字符串型（string）

通过单引号( '') ､双引号( "")或反引号( ` ) 包裹的数据都叫字符串,单引号和双引号没有本质上的区别, 推 荐使用单引号｡

模板字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let name = '张三';         // 单引号
        let sentence = "Hello JS"; // 双引号
        let age = 30;              // 新增：声明 age 变量
        let template = `年龄：${age}`; // 模板字符串

        document.write(name + "<br>"); // 添加换行
        document.write(sentence + "<br>");
        document.write(template);
    </script>
</body>

</html>

  • 注意事项：

    • 引号需成对使用，嵌套时内外引号不同（如外双内单）。

    • 使用转义符 \ 输出特殊字符：console.log('It\'s me'); // It's me

⑶.布尔型（boolean）

  • 值：仅 true（真）和 false（假）。

  • 使用场景：逻辑判断、条件控制。

let isLogin = true;
if (isLogin) {
  console.log('已登录');
}

⑷.未定义类型（undefined）

  • 定义：变量声明但未赋值时的默认值。
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let score;
        console.log(score); // undefined
    </script>
</body>

</html>

应用：检测变量是否已赋值。

if (typeof data === 'undefined') {
  console.log('数据未传递');
}

⑸.空值类型（null）

  • 定义：表示空或不存在的对象。
  • 示例：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let empty = null;
        console.log(empty); // null
        console.log(undefined + 1)  // NaN
        console.log(null + 1) // 1
    </script>
</body>

</html>

null 和 undefined 区别：

undefined 表示没有赋值

null 表示赋值了，但是内容为空

null 开发中的使用场景：

官方解释：把 null 作为尚未创建的对象

大白话： 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

关键区别：undefined 和 null 的类型转换规则
操作数转换为数字的结果加法运算结果
undefinedNaNNaN + 1 = NaN
null00 + 1 = 1
为什么会有这样的设计？

  • undefined：
    表示变量未定义或未初始化，其类型是 undefined，转换为数字时无法确定有效值，因此返回 NaN。

  • null：
    表示“空值”或“无有效值”，但其类型是 object（历史遗留问题）。在数值运算中，null 被设计为等价于 0，以避免某些场景下的错误（例如早期 JavaScript 的兼容性需求）。

总结
  • undefined + 1 = NaN：因为 undefined 转换为数字时是 NaN。
  • null + 1 = 1：因为 null 转换为数字时是 0，0 + 1 的结果是 1。

这种差异是 JavaScript 内置的类型转换规则导致的，需要特别注意 undefined 和 null 在数值运算中的行为。

3.检测数据类型

  • typeof 运算符：返回数据类型字符串。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        console.log(typeof 100);      // 'number'
        console.log(typeof '100');    // 'string'
        console.log(typeof true);     // 'boolean'
        console.log(typeof undefined);// 'undefined'
        console.log(typeof null);     // 'object'（历史遗留问题）
    </script>
</body>

</html>

五、类型转换

1.为什么要类型转换 ？

2.隐式转换 

3.显式转换 

1. 为什么需要类型转换

JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚｡ 坑: 使用表单､prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算｡

此时需要转换变量的数据类型。

通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。

2. 隐式转换

某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则：

⑴.加法运算符 +

规则：

若至少有一个操作数是字符串，则所有操作数会被隐式转换为字符串，然后进行拼接。

若均为数字，则进行数学加法。

示例：

'5' + 3    // "53"（字符串拼接）
5 + 3      // 8（数字相加）

⑵. 减法、乘法、除法运算符（-、*、/）

规则：

运算符会强制将操作数转换为数字，再进行数学运算。

示例：

'10' - 5    // 5（字符串转数字后计算）
'5' * 2     // 10（字符串转数字后计算）

⑶. 一元正号运算符 +

规则：

强制将操作数转换为数字。

若转换失败（如非数字字符串），返回 NaN。

示例：

+'123'      // 123（字符串转数字）
+'abc'      // NaN（转换失败）
+true       // 1（布尔值转数字）
+null       // 0（null转数字）

⑷.隐式转换优先级

缺点：

转换类型不明确，靠经验才能总结

⑸.关键点总结

①+'123' 转换为数字的原因：

一元正号运算符 + 强制将字符串 '123' 转换为数字 123。

②隐式转换规则：

加法（+）：存在字符串则拼接，否则相加。

减法/乘法/除法（-、*、/）：强制转为数字后计算。

一元运算符（+）：强制转为数字。

③避免隐式转换的陷阱：

使用显式转换函数（如 Number()、parseInt()）更安全。

例如：Number('123') 替代 +'123'，提高代码可读性。

<!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>Document</title>
</head>

<body>
  <script>
    console.log(1 + 1)  //2
    console.log('hello' + 1)   //hello1
    console.log('你好' + 1)   //你好1
    console.log(2 + 2)   //4
    console.log(2 + '2') // 22
    console.log(2 - 2)  //0
    console.log(2 - '2')  // 0  
    console.log(+12)
    console.log(+'123')  // 转换为数字型
  </script>
</body>

</html>

3.显式转换

编写程序时过度依靠系统内部的隐式转换是不严禁的,因为隐式转换规律并不清晰,大多是靠经验总结的规律｡ 为了避免因隐式转换带来的问题,通常根逻辑需要对数据进行显示转换｡

概念:

自己写代码告诉系统该转成什么类型

⑴.转换为数字型（number）

①Number() 函数

转成数字类型
如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字
 NaN也是number类型的数据，代表非数字

作用：将任意类型数据转换为数字。

规则：

字符串：

空字符串或纯空格字符串 → 0

纯数字字符串 → 对应数字（支持小数、负数）

非数字内容 → NaN

Number('123');     // 123
Number('12.3');    // 12.3
Number('');        // 0
Number('123abc');  // NaN

布尔值：

true → 1

false → 0

Number(true);  // 1
Number(false); // 0

null 和 undefined：

null → 0

undefined → NaN

Number(null);      // 0
Number(undefined); // NaN
②parseInt() 和 parseFloat()

作用：从字符串中提取整数或浮点数。

规则：

parseInt(str, 进制)：

从左到右提取整数，忽略非数字字符。

默认十进制，可指定进制（如 2、8、16）。

parseInt('123px');    // 123
parseInt('12.3');     // 12
parseInt('1010', 2);  // 10（二进制解析）

parseFloat(str)：

提取浮点数，支持小数点。

parseFloat('12.3元');  // 12.3
parseFloat('12.3.4');  // 12.3（提取到第二个小数点前）

⑵转换为字符串型（string）

①String() 函数

作用：将任意类型转换为字符串。

规则：

   原始值：

String(123);     // '123'
String(true);    // 'true'
String(null);    // 'null'
String(undefined); // 'undefined'

    对象：

调用对象的 toString() 方法。

String({});      // '[object Object]'
String([1, 2]);  // '1,2'
②toString() 方法

作用：与 String() 类似，但 null 和 undefined 不可用。

示例：

(123).toString();  // '123'
true.toString();   // 'true'
// null.toString();   // 报错
// undefined.toString(); // 报错

⑶ 转换为布尔型（boolean）

Boolean() 函数

作用：

将任意类型转换为布尔值。

规则：

假值（Falsy） → false： 0、NaN、''（空字符串）、null、undefined、false

其他值 → true：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>


        console.log(Boolean(0))// false
        console.log(Boolean('0'))// true（非空字符串）
        console.log(Boolean([]))// true（空数组是对象）
        console.log(Boolean({}))// true（空对象）
        console.log(Boolean('false')) // true（非空字符串）
        console.log(Boolean(false))  //false


    </script>
</body>

</html>

六、用户订单信息案例

需求：用户输入商品价格和商品数量，以及收货地址，可以自动打印订单信息

分析：

①：需要输入3个数据，所以需要3个变量来存储 price num address

②：需要计算总的价格 total

③：页面打印生成表格，里面填充数据即可

④：记得最好使用模板字符串

<!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>Document</title>
  <style>
    h2 {
      text-align: center;
    }

    table {
      /* 合并相邻边框 */
      border-collapse: collapse;
      height: 80px;
      margin: 0 auto;
      text-align: center;
    }

    th {
      padding: 5px 30px;
    }

    table,
    th,
    td {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <h2>订单确认</h2>


  <script>
    // 1 用户输入
    let price = +prompt('请输入商品价格：')
    let num = +prompt('请输入商品数量：')
    let address = prompt('请输入收获地址：')
    // 2.计算总额
    let total = price * num
    // 3.页面打印渲染
    document.write(`
      <table>
          <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品数量</th>
            <th>总价</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>

相关文章：

  • 车载以太网测试-13【网络层-IGMP协议】
  • 计算机网络——NAT
  • 深入解析大语言模型的 Function Call 实现—— 以 Qwen2.5为例
  • C# NX二次开发：在多个体的模型中如何实现拉伸操作布尔减
  • Java入职篇（5）—— IDEA快捷键
  • 使用 Docker 部署前端项目全攻略
  • DevOps实践：持续集成与持续部署完全指南
  • 图解AUTOSAR_CP_BSW_General
  • 什么是 HTML?
  • 第一个vue项目
  • 成为Python砖家(7): 使用miniforge管理Python版本
  • java设计模式面试题3道
  • Linux设置环境变量
  • 【DeepSeek】蓝耘智算 | 中国AI新范式：蓝耘智算云+DeepSeek R1部署实战教程
  • HiRAG层次化知识增强的检索增强生成框架:模仿人类从细节到抽象的多粒度认知过程【附代码】
  • 驾驭 DeepSeek 科技之翼，翱翔现代学习新天际
  • TensorFlow 是什么？
  • 卷积神经网络 - 一维卷积、二维卷积
  • 【PTA题目解答】7-3 字符串的全排列（20分）next_permutation
  • Redis 的特点
  • 中国队夺跳水世界杯总决赛首金
  • 11家券商一季度净利翻番：9家利润超20亿，国泰海通居首
  • 剑指3000亿产业规模，机器人“武林大会”背后的无锡“野望”
  • 周劼已任中国航天科技集团有限公司董事、总经理、党组副书记
  • 网商银行2024年年报发布，客户资产管理规模超过1万亿
  • 外交部：中美双方并未就关税问题进行磋商或谈判