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

目录一、JavaScript 是什么二、如何在 HTML 中引入 JavaScript2.1 内部引入方式2.2 外部引入方式三、变量数据的容器3.1 什么是变量3.2 let 与 var 的区别3.3 变量命名规则四、常量不变的值五、数据类型详解5.1 数值类型5.2 字符串类型5.3 布尔类型5.4 undefined 类型六、类型转换6.1 隐式转换6.2 显式转换七、输入与输出7.1 输出7.2 输入八、最佳实践一、JavaScript 是什么JavaScript 是一种轻量级的脚本语言它不能独立运行需要嵌入到 HTML 中由浏览器来执行。作为前端开发的三大核心技术之一HTML、CSS、JavaScript它赋予了网页交互能力让静态页面活起来。二、如何在 HTML 中引入 JavaScript2.1 内部引入方式直接在 HTML 文件中使用 script 标签包裹 JavaScript 代码!DOCTYPE html html langzh-CN head meta charsetUTF-8 titleJavaScript 基础/title /head body script alert(欢迎学习 JavaScript) /script /body /html2.2 外部引入方式将 JavaScript 代码写在独立的 .js 文件中通过 src 属性引入script srcdemo.js/script⚠️ 注意如果 script 标签使用了 src 属性引入外部文件标签内部的代码将被忽略。三、变量数据的容器3.1 什么是变量变量是计算机中用来存储数据的容器。你可以把它想象成一个盒子我们可以往里面放东西数据也可以随时取出使用。// 声明变量 let age // 赋值 age 18 // 声明并赋值推荐写法 let name 张三3.2 let 与 var 的区别特性letvar重复声明❌ 不允许✅ 允许块级作用域✅ 支持❌ 不支持变量提升❌ 不存在✅ 存在暂时性死区✅ 存在❌ 不存在推荐使用 let它更加严谨能有效避免很多潜在问题。3.3 变量命名规则✅ 只能包含字母、数字、下划线 _ 和美元符号 $✅ 不能以数字开头✅ 区分大小写Age 和 age 是不同的变量❌ 不能使用 JavaScript 关键字如 let、var、if 等 建议使用有意义的名称做到见名知义// 正确示例 let userName 李四 let _count 10 let $price 99.9 // 错误示例 // let 123abc 错误 // 不能以数字开头 // let let 错误 // 不能使用关键字四、常量不变的值使用 const 声明的变量称为常量一旦赋值就不能再修改const PI 3.14159 const MAX_SIZE 100 // PI 3.14 // ❌ 错误常量不能重新赋值使用场景当某个值永远不会改变时使用 const 声明如配置值、数学常量等。五、数据类型详解JavaScript 中的数据类型分为两大类5.1 数值类型包括整数、小数、正数、负数let score 100 // 整数 let price 12.345 // 小数 let temperature -40 // 负数 console.log(typeof score) // 输出: number5.2 字符串类型使用引号包裹的数据推荐使用单引号let name 张三 let message 你好世界 let template 我的名字是 ${name} // 模板字符串 console.log(typeof name) // 输出: string5.3 布尔类型只有两个值true真和 false假let isLoggedIn true let hasPermission false console.log(typeof isLoggedIn) // 输出: boolean5.4 undefined 类型变量声明但未赋值时的默认值let temp console.log(temp) // 输出: undefined console.log(typeof temp) // 输出: undefined六、类型转换6.1 隐式转换JavaScript 会自动进行类型转换let num 13 let str 2 console.log(num str) // 输出: 132字符串拼接 console.log(num - str) // 输出: 11自动转为数值 console.log(num * str) // 输出: 26自动转为数值6.2 显式转换为了避免隐式转换的不确定性推荐使用显式转换// 转换为数值 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 输出// 弹窗输出 alert(这是一个提示信息) // 页面输出 document.write(内容将显示在页面上) // 控制台输出 console.log(用于调试的信息)7.2 输入// 弹窗输入 let name prompt(请输入您的姓名) console.log(您好 name)八、最佳实践优先使用 const其次 let避免使用 var变量命名要有意义如 userName 而非 a、b使用显式类型转换避免依赖隐式转换添加适当的注释提高代码可读性保持代码缩进一致推荐使用 2 空格或 4 空格