← 返回目录

4. 五种基本数据类型

东西进箱子前,得知道它是哪种。本页认全五种基本类型,再学会用 ${} 把变量插进句子里。

4.1 互动演示

输入内容点按钮,看 typeof 结果和拼接效果。

4.2 知识点逐条讲解(配合代码)

① 五种基本数据类型:东西也分"种类"

往箱子里放东西之前,得知道这东西是哪种:是数字、是文字、是对/错、还是空着。JS 最基础的种类有 5 种:

类型人话例子
number 数字整数、小数、无穷、还有"算不出来"的 NaN10、3.14、NaN
string 字符串引号包起来的一段文字'你好'、"hi"
boolean 布尔只有两个答案:是/否true(是)、false(否)
undefined箱子要了,但忘了放东西let a; → undefined
null主动把箱子腾空,表示现在没东西let b = null;

补充一点:布尔值参与算数时,true 当 1、false 当 0(比如 true + 1 = 2)。

② 字符串:用 ${} 把变量插进句子里

想拼一句话"我叫小明,今年18岁",老办法用一堆加号,又长又容易错。新办法用反引号 ` `(就是键盘左上角那个键),里面写 ${变量名} 就能直接把变量值塞进句子,还能保留换行。

let name = "小明";  // 姓名
let age = 18;       // 年龄

// 老办法:加号拼接,啰嗦
console.log("我叫" + name + ",今年" + age + "岁");

// 新办法:反引号 + ${},一眼看明白
console.log(`我叫${name},今年${age}岁`);
//            ${name} 就是"把 name 的值掏出来放这儿"

// length:数一数这串文字有几个字符
console.log("hello".length); // 5
		

想在字符串里打出特殊符号,用反斜杠 \ 转义,常见这几个:

写法打出来是什么
\'一个单引号 '
\"一个双引号 "
\\一个反斜杠 \
\n换行
\tTab 缩进

undefinednull 的区别

let a;            // 只跟电脑要了箱子,没放东西
console.log(a);   // undefined:它"应该有值",但你还没给

let b = null;     // 你主动把箱子设成"空"
console.log(b);   // null:是你故意说"这里先不放"
		

如果你分不清 undefined 和 null,就这么记:undefined 是"我忘了放"(意外的空),null 是"我故意放空"(主动的空)。一个是疏忽,一个是表态。

实战:用在哪 / 常见坑 / 怎么解决

① 可能在什么地方用:用户名存字符串、年龄存数字、是否登录存布尔值。

② 常见的问题:从输入框拿到的明明像数字,相加却变成拼接(其实它是字符串)。

③ 解决思路:typeof 看看类型;要算数就先用 Number() 把它转成数字。

一句话记住:五种基本类型 number/string/boolean/undefined/null;拼句子用反引号 ${};undefined=忘了放、null=故意放空