前面已经大略介绍了 HTML 和 CSS 的入门知识了，接着我们要来认识 Javascript，来为我们的网页添加更多逻辑互动。

怎麽宣告变数？

Javascript 是个弱型别语言，在宣告变数时，不像其他语言需要先指定型别那麽严谨，宣告的变数名会对应记忆体位子，把其值存入记忆体中，之後要取出值，只要藉由变数名，就能找到对应的值。

要帮变数命名也是有规则的，首先保留字（如：class）与关键字（如：var），不能用於变数名，变数名不能由数字作为开头，且变数名有大小写之分，可以使用$、_在名称中。常见的命名法为驼峰命名法，如：petName、pet_name。

目前宣告方式有 3 个（含 ES6）

什麽是 ES6？ ES6 正式名称为 ECMAScript 2015，是第六版 ECMAScript，因此简称 ES6。
ES6 增加了原本 Javascript 没有的语法，能更加方便使用与维护，但有些浏览器兼容性可能不好（如：IE）

• var，Javascript 最原始的宣告方法，使用起来很简单暴力，属於全域宣告，可以在函式作用域做区隔，因为容易污染全域变数，所以目前比较少使用了。
• let，ES6 新增的宣告方法，let 与 var 最大的不同就是区域作用域（block scope），比较不会有污染问题。
• const，ES6 新增的宣告方法，const 最大的特色是属於常数宣告，常数宣告的意思是不能随意改值，降低不小心更改所导致的 bug，需注意 因为是常数宣告，无法随意改值，所以使用常数宣告一定要赋予值，否则会报错。

何谓常数？ 就像是圆周率 π 就是数学常数 3.14159，并不会随意更改。

变数的基本型别

Javascript 的基本型别

• string 字串型别，这个型别很简单，只要是使用 " 、 ' 包起来的就是字串型别，另外 ES6 还新增了样板字面值 ‵，使用起来更加方便灵活，还能套用变数，注意 包起来的符号要一样的才可以。

  • "string" 头尾都是使用 "
  • 'string' 头尾都是使用 '
  • 'string" 交错使用会报错。
  • 如果字串内要使用 ' 则需要使用 " 来包，如："I'm Mao"，反之亦然。
  • ES6 新增的样板字面值，‵string ${ 变数名 }‵ 头尾都使用 ‵，要使用变数可以在里面使用 ${} 来使用。

• number 数字型别，这个型别代表数字，以下这些都是数字型别

  • 不管是正负数、小数点都是。（如：0, 9, -8, 7.6）
  • Infinity（无限大）
  • -Infinity（无限小）
  • NaN（Not a Number，非数字）

• boolean 布林值，这个值就非常的单纯许多，只有 true 与 false，这两个值，主要是使用在判断式中，在 Javascript 中，任何值都能转换成布林值。

• undefined 未定义型别，只有一个值 undefined，代表这个变数还没定义型别。

• null 空值，只有一个值 null ，代表这个变数目前定义为没有值。

• object 以上基本型别以外的都是Object 物件，物件这个东西比较复杂，我们之後在细细品味。

如何知道变数的型别？

可以使用 Javascript 中用来判断型别的运算符 typeof，使用方法如下

var a;
let n = null;

typeof "I'm Mao"; // string
typeof NaN;       // number
typeof true;      // boolean
typeof a;         // undefined
typeof n;         // object
typeof {};        // object
typeof [];        // object

欸～这时会发现奇怪的事情，null 给出的型别怎麽是 object 呢？ 这其实是一开始 Javascript 设置实作时产生的 bug！

Javascript 的值是由一个表示型别的标签，与实际内容的值所组成。
由於物件型别标签是 0，而 null 代表的是空值（通常以 0x00 表示），导致物件与空值的标签搞混，而产生的结果。
内容取自 008 天 重新认识 Javascript

既然 Javascript 已经不打算修复这个 bug 了（应该说一改会牵动到很多东西，就乾脆不改了），我们就 想像 null 是空物件吧，实际上并不是唷！

如何分辨 NaN

这时会很困扰，会发现一般数字与 NaN 检查型别都是回传 number，要判断数字型别是否为 NaN。
可以利用 JavaScript 提供的 isNaN() 来进行判断！

let n = NaN;
console.log( isNaN(n) );  // true

如何转型别？

有的时候我们宣告变数使用var a = "1"，那麽 a 是的型别是什麽？ 聪明的你应该马上就知道是字串（string）型别了吧！
那麽如果想要把 a 转型成数字（number）型别，就可以使用转换型别的语法，刚好来介绍一下转换型别的语法吧！

转换型别语法：

• 转换成字串（string）型别：
  • toString()，使用方法a.toString()就能转换成字串型别，但遇到 null 或 undefined 会报错
  • String()，使用方法String(a)就能转换成字串型别，遇到 null 或 undefined 也不会报错
  • 变数直接加空字串，使用方法 a + '' 就能转换成字串型别。
• 转换成数字型别
  • Number()，任意资料型别转换成数字型别。
  • parseInt()，将字串或数字转成整数。
  • parseFloat()，将字串或数字转成浮点数。
  • 变数前面使用 + 一元运算子 或後面使用 *1，使用方法 +a 或 a *1 就能转换成数字型别。
• 任何型别都可以转换成 布林值
  • true
    • 任何非空字串的值
    • 任何非 0 的数字
    • 任何物件
  • false
    • 空字串（'' 或 ""）
    • 数字 0 和 NaN
    • null 和 undefined

总结

终於开始学习程序语言了，今天认识了基础的宣告变数与型别判断，蛮推荐 Kuro 大大写的 008 天 重新认识 Javascript，写得十分有趣清楚，下一篇章先进入我们的运算符篇。

参考资料

• 008 天 重新认识 Javascript