JavaScript 基础入门：从零开始掌握变量与数据类型

[一、JavaScript 是什么？](#一、JavaScript 是什么？)

[二、如何在 HTML 中引入 JavaScript？](#二、如何在 HTML 中引入 JavaScript？)

[2.1 内部引入方式](#2.1 内部引入方式)

[2.2 外部引入方式](#2.2 外部引入方式)

三、变量：数据的容器

[3.1 什么是变量？](#3.1 什么是变量？)

[3.2 let 与 var 的区别](#3.2 let 与 var 的区别)

[3.3 变量命名规则](#3.3 变量命名规则)

四、常量：不变的值

五、数据类型详解

[5.1 数值类型](#5.1 数值类型)

[5.2 字符串类型](#5.2 字符串类型)

[5.3 布尔类型](#5.3 布尔类型)

[5.4 undefined 类型](#5.4 undefined 类型)

六、类型转换

[6.1 隐式转换](#6.1 隐式转换)

[6.2 显式转换](#6.2 显式转换)

七、输入与输出

[7.1 输出](#7.1 输出)

[7.2 输入](#7.2 输入)

八、最佳实践

一、JavaScript 是什么？

JavaScript 是一种轻量级的脚本语言，它不能独立运行，需要嵌入到 HTML 中，由浏览器来执行。作为前端开发的三大核心技术之一（HTML、CSS、JavaScript），它赋予了网页交互能力，让静态页面"活"起来。

二、如何在 HTML 中引入 JavaScript？

2.1 内部引入方式

直接在 HTML 文件中使用 <script> 标签包裹 JavaScript 代码：

html 复制代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <title>JavaScript 基础</title>

</head>

<body>

  <script>

    alert('欢迎学习 JavaScript！')

  </script>

</body>

</html>

2.2 外部引入方式

将 JavaScript 代码写在独立的 .js 文件中，通过 src 属性引入：

html 复制代码

<script src="demo.js"></script>

⚠️ 注意：如果 <script> 标签使用了 src 属性引入外部文件，标签内部的代码将被忽略。

三、变量：数据的容器

3.1 什么是变量？

变量是计算机中用来存储数据的"容器"。你可以把它想象成一个盒子，我们可以往里面放东西（数据），也可以随时取出使用。

javascript 复制代码

// 声明变量
let age
// 赋值
age = 18
// 声明并赋值（推荐写法）
let name = '张三'

3.2 let 与 var 的区别

特性	let	var
重复声明	❌ 不允许	✅ 允许
块级作用域	✅ 支持	❌ 不支持
变量提升	❌ 不存在	✅ 存在
暂时性死区	✅ 存在	❌ 不存在

推荐使用 let，它更加严谨，能有效避免很多潜在问题。

3.3 变量命名规则

✅ 只能包含字母、数字、下划线 _ 和美元符号 $
✅ 不能以数字开头
✅ 区分大小写（Age 和 age 是不同的变量）
❌ 不能使用 JavaScript 关键字（如 let、var、if 等）
💡 建议使用有意义的名称，做到见名知义

javascript 复制代码

// 正确示例
let userName = '李四'
let _count = 10
let $price = 99.9

// 错误示例
// let 123abc = '错误'    // 不能以数字开头
// let let = '错误'       // 不能使用关键字

四、常量：不变的值

使用 const 声明的变量称为"常量"，一旦赋值就不能再修改：

javascript 复制代码

const PI = 3.14159

const MAX_SIZE = 100

// PI = 3.14  // ❌ 错误！常量不能重新赋值

使用场景：当某个值永远不会改变时，使用 const 声明，如配置值、数学常量等。

五、数据类型详解

JavaScript 中的数据类型分为两大类：

5.1 数值类型

包括整数、小数、正数、负数：

javascript 复制代码

let score = 100        // 整数
let price = 12.345     // 小数
let temperature = -40  // 负数
console.log(typeof score)  // 输出: number

5.2 字符串类型

使用引号包裹的数据，推荐使用单引号：

javascript 复制代码

let name = '张三'

let message = "你好，世界！"

let template = `我的名字是 ${name}`  // 模板字符串

console.log(typeof name)  // 输出: string

5.3 布尔类型

只有两个值：true（真）和 false（假）

javascript 复制代码

let isLoggedIn = true

let hasPermission = false

console.log(typeof isLoggedIn)  // 输出: boolean

5.4 undefined 类型

变量声明但未赋值时的默认值：

javascript 复制代码

let temp

console.log(temp)         // 输出: undefined

console.log(typeof temp)  // 输出: undefined

六、类型转换

6.1 隐式转换

JavaScript 会自动进行类型转换：

javascript 复制代码

let num = 13
let str = '2'
console.log(num + str)   // 输出: '132'（字符串拼接）
console.log(num - str)   // 输出: 11（自动转为数值）
console.log(num * str)   // 输出: 26（自动转为数值）

6.2 显式转换

为了避免隐式转换的不确定性，推荐使用显式转换：

javascript 复制代码

// 转换为数值
let str = '123'
let num = Number(str)
console.log(typeof num)  // 输出: number

// 转换失败时
let invalid = Number('hello')
console.log(invalid)     // 输出: NaN (Not a Number)

七、输入与输出

7.1 输出

javascript 复制代码

// 弹窗输出

alert('这是一个提示信息')

// 页面输出

document.write('内容将显示在页面上')

// 控制台输出

console.log('用于调试的信息')

7.2 输入

javascript 复制代码

// 弹窗输入

let name = prompt('请输入您的姓名：')

console.log('您好，' + name)

八、最佳实践

优先使用 const，其次 let，避免使用 var
变量命名要有意义，如 userName 而非 a、b
使用显式类型转换，避免依赖隐式转换
添加适当的注释，提高代码可读性
保持代码缩进一致，推荐使用 2 空格或 4 空格