JavaScript 基础入门精讲（一）变量与数据类型

最新推荐文章于 2025-10-26 17:23:03 发布

原创最新推荐文章于 2025-10-26 17:23:03 发布 · 420 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

JavaScript 基础入门精讲（一）变量与数据类型

学习目标：掌握变量声明、数据类型及转换，理解运算符隐式转换逻辑
适用场景：零基础前端学习 | 数据类型转换避坑指南

一、JavaScript的三种引入方式

1.1 内联式（直接嵌入HTML）

<script>
    alert('页面加载时弹出提示！');
</script>

1.2 外联式（独立.js文件）

// index.js
document.write('外部脚本内容');

<script src="index.js"></script>  <!-- 注意：此时script标签内的代码无效 -->

1.3 模块化（ES6推荐）

// 通过type="module"实现模块化
<script type="module" src="module.js"></script>

注意事项：

外联式引入时，<script>标签内的代码会被忽略4 24
推荐将脚本放在</body>前以避免阻塞渲染

二、代码规范与注释

2.1 注释技巧

// 单行注释（Ctrl+/快捷注释）

/*
 多行注释
 适合代码块说明
 兼容所有JS版本
*/

2.2 结束符规则

let a = 1  // 分号可省略
let b = 2; // 显式结束

最佳实践：

同一行多语句必须加分号
使用ESLint等工具统一风格54

三、变量与常量

3.1 变量声明

let userName = '小明';  // 现代写法（推荐）
var age = 18;          // 旧版写法（存在变量提升问题）

3.2 常量声明

const PI = 3.1415;  
// PI = 3.14;  // 报错！常量不可重新赋值

3.3 命名规范

合法命名：userName、_temp、$element
非法命名：1var（数字开头）、let（关键字）
行业惯例：小驼峰命名法（如getUserInfo）

四、核心数据类型

4.1 类型检测

typeof 42;          // "number"
typeof "Hello";     // "string"
typeof true;        // "boolean"
typeof undefined;   // "undefined"

4.2 数值类型

let price = 9.99;    // 小数
let hex = 0xFF;      // 十六进制
let infinity = 1/0; // Infinity

4.3 字符串处理

let str1 = "双引号";
let str2 = '单引号'; 
let template = `反引号支持
多行字符串`;  // ES6模板字符串

4.4 特殊类型

let isAdmin = true;  // 布尔值
let data;            // undefined（未赋值）
let empty = null;    // 空对象指针

五、类型转换技巧

5.1 隐式转换

"5" + 2 = "52"    // 字符串拼接
"5" - 2 = 3       // 数值运算
true + 1 = 2      // 布尔转数值

5.2 显式转换

Number("123");     // 123
Number("12.3px"); // NaN（转换失败）

String(123);      // "123"
Boolean(0);       // false

避坑指南：

parseInt("12px") → 12（提取数字）
避免使用==进行松散比较24 54

六、实战代码示例

<!DOCTYPE html>
<html>
<body>
  <script>
    // 用户交互示例
    let name = prompt("请输入姓名：");
    alert(`欢迎您，${name}！`);
    
    // 类型转换演示
    let input = "123";
    console.log(input + 5);     // "1235"
    console.log(Number(input)+5); // 128
  </script>
</body>
</html>

优化说明：

采用CSDN推荐的Markdown格式，使用三级标题体系46
代码块使用语法高亮（```javascript）提升可读性
添加注意事项和版本差异说明
去除冗余代码示例，保留典型应用场景
增加ES6新特性（如模板字符串）的讲解

如需完整案例练手以及讲解，欢迎阅读JavaScrip学习专栏！