前情提要

艾草：「好了，现在我们可以开始入门魔法课程 JavaScript 变数与值的教学罗！」

「耶～总算要开始了吗！来吧！」

艾草：「万事起头难，离你成为大魔法师不远的，加油～」

前言

今天要来学习变数，学习变数前先来看一张图：

这张图用中文描述就是：我宣告了一个变数，其名为 a，我赋予了它数值 1 。

文章内会常常提到这张图唷！

变数（ Variable ）与值 ( Value )

变数命名

如前言的附图 let a = 1; a 为变数的名称，通常在替变数命名时我们可留意以下规则：

• 命名尽量语意化
• 不可以使用保留字命名
• 统一命名规则
• 可使用小驼峰式命名

小驼峰式命名：第一个单字以小写字母开始；第二个单字的首字母大写，例如：firstName、lastName。
参考文章：https://zh.wikipedia.org/wiki/%E9%A7%9D%E5%B3%B0%E5%BC%8F%E5%A4%A7%E5%B0%8F%E5%AF%AB

对，没有错！我的附图 let a ; 只是为了给大家一个错误范例观看（绝对不是因为我懒），千万不要未来在程序码上直接命名 a,b,c 等，毫无语意的名称，这样下次回来看自己的 Code 时一定满头雾水，没准还把同事们雷的不要不要的。

大家在命名变数时一定要秉持着不要相害的精神，这样世界就能越来越和平的（？

讲完了变数的命名让我们来谈谈值吧！

值的原始型别

为什麽要特别提到值的原始型别呢？

因为变数没有型别，变数被赋予的那个"值"才是有型别的，这边可以对应前言附图提到的我赋予了它数字 1 的部分。

型别的种类又分别有原始型别（Primitive Type）与物件型别( Object Type )，我们先针对原始型别来讲解，物件型别留到物件章节再来介绍。

原始型别（Primitive Type） 共有以下七种：

文章内会介绍到前面五种型别。

• 数字(number)
• 字串(string)
• 布林(boolean)：仅两个值 true 、 false 。
• null：表示被赋予值空值
• undefined：表示尚未被赋予值
• Symbol
• BigInt

这边也来教如何判断变数的型别，可以使用 typeof 来判断：

let a = 1;
console.log(typeof a)//"number"

值得留意的是 typeof 会回传字串值，而该字串值会回传运算元所代表的型别。
底下范例程序码注解为了方便检视，透过 typeof 检视型别时，除字串型别，其余型别虽回传字串值，但不会特别包覆双引号。

数字(number)型别

数字型别就是数字（废话，以下来宣告一个变数 a 并赋予它数字型别 1：

let a = 1;

数字也可以搭配常见运算子做各式运算，方法如下：

1+1;//加
1-1;//减
1*1;//乘
1/1;//除
1**1;//平方
1%1;//取余

也可以利用赋予值给变数的方式去做运算。

let a = 1;
let b = 1;
let c = a * b;

number 型别也支援小数点与负数，但在使用小数点时要特别留意 JavaScript 使用浮点数运算的关系，在数字的精度上会有一定的落差，所以才会发生 0.1 + 0.2 ≠ 0.3 。

讲到 number 型别可以运算，那我们来尝试把它跟字串拿来运算吧（住手！

那可能得到以下两种结果：

//情况一
let a = 1;
let b = "1";
let c = a * b;
console.log(c)//1
console.log(typeof c)//number

//情况二
let d = 1;
let e = "很棒";
let f = d * e;
console.log(f)//NaN
console.log(typeof f)//number

在情况一数值1乘上字串1时，JavaScript 会很贴心(?)的帮你转型，所以可以很正常的运算出来，而情况二是根本不可能去运算的情况，就会显示 NaN。

NaN 的型别为 number ，其实代表的是 Not a number，在你尝试胡乱运算时，就可以看到它出来抗议！

另外因为 NaN 型别为数字型别，所以有时候难以判断某个值是否是 NaN，此时就可以使用 isNaN() 来判断！

NaN 知识点

• NaN 是数字型别
• NaN 代表 Not a number
• NaN 产生时机为无法计算出结果时
• 可以使用 isNaN() 来判断是否为 NaN

接下来，来聊聊赋值运算子吧。

数字型别与赋值运算子

赋值运算子包含 +=、-=：

let a = 1;
a = a + 1;
a += 1; // a = a+1; 的缩写

以上就是 +=、-= 的用法，接下来来聊聊 a++、a--:

a = a + 1;
a += 1;
a++; //三者皆达成 +1

其实 a++、a-- 就是对前面的变数 a 执行+1或-1，比较特别的是 a++、a-- 不用使用 = 也有被赋予给变数了，这点要特别注意！

数字型别转型字串型别
有些情境下，我们会需要将数字转型成字串。
例如要将电话号码连结在一起时：

let countryCode = 886;
let myNumber = 987654321;

countryCode = countryCode.toString();
myNumber = myNumber.toString();

let myPhoneNumber = countryCode + "+" + myNumber;
console.log(myPhoneNumber)//"886+987654321"
console.log(typeof myPhoneNumber)//"string"

如上使用 toString() 成功转型出我们要的电话号码罗！

知识点：赋值运算子

• 可以使用 a += 1 、 a -= 1 来缩写 a = a + 1、a = a - 1
• a++、a-- 虽然没有 = ，但会帮该变数执行 +1、-1

总结：数字型别

• 数字型别可以搭配常见运算子运算，包含 + - * / ** % 等
• NaN 也是数字型别
• 数字型别可以使用 toString() 转型成字串
• 数字型别可以搭配使用赋值运算子来运算

字串(string)型别

let a = "我好棒";

字串型别外层要使用单引号或双引号包覆起来，如果没有包覆起来会被误会是变数，而包覆时要留意全都使用单引号、或都使用双引号，两边用不同引号包覆，会报错！

如果字串里面有包含 ’ 例如英文缩写会使用到 ’ 时，外层请使用双引号区分，要将两段字串连结在一起可以使用加号：

let a = "我好棒";
let b = "It’s nice of you.";
let c = "我好棒" + "It’s nice of you.";//字串连结
let d = a + b;//也可透过此方式连结字串
console.log(d)//"我好棒It’s nice of you."

另外其他型别与字串型别相加，会被转型成字串，如下：

let a = "1";
let b = 6666;
let c = a + b; 
console.log(typeof c)//"string"

比较特别的是使用 -、*、/、%、** 等算术运算子去运算时，因为 JS 会透过 Number()帮你先尝试看看能不能转型成数字去计算，所以如果该字串是能转型数字的，会变成数字型别，如下：

let a = "1";
let b = 6666;
let c = a - b;
console.log(typeof c)//number

字串的实用方法
可以使用length来查看字串的字元数。

console.log("123456".length)//6
console.log("我很棒".length)//3

空字元也会被计算，为了避免这种情况可以使用 trim() 来过滤掉字串前後的空白。

let myEmail = " [email protected]";
myEmail = myEmail.trim();
console.log(myEmail)//"[email protected]"

知识点：字串的实用方法

• 可以使用 length 来查看字元数
• 可以使用 trim() 来过滤前後空白

字串型别转型数字型别
很多时候，我们会需要将字串转型成数字去做计算，可以透过 parseInt() 来实现：

let a = "1";
a = parseInt(a);
console.log(typeof a)//number

如此就完成字串转型数字罗！

总结：字串型别

• 字串型别要留意外层要包覆起来，才不会被误认成变数
• 纯值与字串型别相加会变成字串型别
• 可转型为数字的字串型别使用 -、*、/、%、** 会被转型成数字运算
• 字串型别可使用 length 查看字元、可使用 trim() 过滤空白
• 字串型别可使用 parseInt() 转型数字

布林(boolean)型别

布林就只有两个值 true 、 false，通常会拿来与 if 配合，看有没有符合条件，有就 true 没有就 false。
刚开始学时很好奇为啥要叫布林，後来才知道是以发明布林代数的数学家乔治·布尔为名。

布林可以直接用赋予值的方式：

let a = true;

或是比较的方式：

let a = 2 > 1;//true

总结：布林型别

• 布林只有两个值 true 、 false
• 布林常用於流程判断

undefined 、null

把这两个型别放在一起是因为它们比较可能被搞混，undefined、null 都只有一个值，分别就是 undefined 跟 null。

首先，先来了解如何宣告变数并赋予 undefined 的值：

let a = undefined;

或我们尚未宣告时，其实该变数也是暂时被赋予 undefined：

let a;
console.log(typeof a)//undefined

接下来，来看一下如何赋予 null 的值：

let a = null;
console.log(typeof null)

我们宣告了变数，但尚未赋予该变数值时，该变数会先被赋予 undefined ，而 null 则可以拿来赋予变数空值，可用於清空某笔不需要的资料。

其实这两者最大的差异点在：

• null 有被赋予值，被赋予了空值
• undefined 通常指尚未被赋予值

补充：查询 null 型别时会看到 object ，需要特别留意。

小练习

学完了原始上述值的原始型别，来做个小练习题，请问以下 console.log 分别会印出什麽呢？

//1
let a = 3 + "3";
console.log( a, typeof a);//?

//2
let b = 4 * "4";
console.log( b, typeof b);//?

//3
let c = 1 * "你好棒";
console.log( c, typeof c);//?

//4
let d = "12";
let e = 12;
d += e;
e = e.toString();
e++;
console.log( d , e);//?
console.log( typeof d , typeof e);//?

//5
let f = 3 < 2;
console.log( f , typeof f)//?

答案可以透过开发人员工具的 Console 检视。

接下来，让我们来了解变数是如何宣告的！

参考文献

JavaScript 必修篇 - 前端修练全攻略(六角学院)
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Data_structures
https://ithelp.ithome.com.tw/articles/10190873