avaScript 中的數字類型包含整數和浮點數：

const integer=4;
const float=1.5;

typeof integer; //=> 'number'
typeof float;   //=> 'number'
復制代碼

另外還有 2 個特殊的數字值：Infinity（比其他任何數字都大的數字）和 NaN（表示“Not A Number”概念）：

const infinite=Infinity;
const faulty=NaN;

typeof infinite; //=> 'number'
typeof faulty;   //=> 'number'
復制代碼

雖然直接使用 NaN 的情況很少見，但在對數字進行無效的操作后卻會令人驚訝地出現。

讓我們仔細看看 NaN 特殊值：如何檢查變量是否具有 NaN，并了解怎樣創建“Not A Number”值。

NaN number

JavaScript 中的數字類型是所有數字值的集合，包括 “Not A Number”，正無窮和負無窮。

可以使用特殊表達式 NaN 、全局對象或 Number 函數的屬性來訪問“Not A Number”：

typeof NaN;        //=> 'number'
typeof window.NaN; //=> 'number'
typeof Number.NaN; //=> 'number'
復制代碼

盡管具有數字類型，但“Not A Number”是不代表實數的值。NaN 可用于表示錯誤的數字運算。

例如，將數字與 undefined 相乘不是有效操作，因此結果為 NaN：

1 * undefined;     //=> NaN
復制代碼

同樣嘗試解析無效的數字字符串（如 'Joker'）也會導致 NaN：

parseInt('Joker', 10); //=> NaN
復制代碼

檢查 NaN 是否相等

NaN有趣的特性是，即使使用 NaN 本身，它也不等于任何值：

NaN===NaN; //=> false
復制代碼

此行為對于檢測變量是否為 NaN 非常有用：

const someNumber=NaN;

if (someNumber !==someNumber) {  console.log('Is NaN');
} else {
  console.log('Is Not NaN');
}

// logs "Is NaN"
復制代碼

僅當 someNumber 是 NaN 時，someNumber !==someNumber 表達式才是 true。因此，以上代碼片段輸出到控制臺的結果是 "Is NaN"。

JavaScript 通過內置函數來檢測 NaN：isNaN() 和 Number.isNaN()：

isNaN(NaN); //=> true
isNaN(1);   //=> false

Number.isNaN(NaN); //=> true
Number.isNaN(1);   //=> false
復制代碼

這些函數之間的區別在于，Number.isNaN() 不會將其參數轉換為數字：

isNaN('Joker12');        //=> true
Number.isNaN('Joker12'); //=> false
復制代碼

isNaN('Joker12') 將參數 'Joker12' 轉換為數字，即 NaN。因此該函數返回 true 。

另一方面，Number.isNaN('Joker12') 會檢查參數是否為 NaN 而不進行轉換。該函數返回 false ，因為'Joker12' 不等于 NaN。

導致 NaN 的運算

1 解析數字

在 JavaScript 中，你可以將字符串形式的數字轉換為數字。

例如你可以輕松地將字符串 '1.5' 轉換為浮點數 1.5：

const numberString='1.5';
const number=parseFloat(numberString);

number; //=> 1.5
復制代碼

當字符串不能被轉換為數字時，解析函數返回 NaN ：表示解析失敗。這里有些例子：

parseFloat('Joker12.5'); //=> NaN
parseInt('Joker12', 10); //=> NaN
Number('Joker12');       //=> NaN
復制代碼

解析數字時，最好先確認解析結果是否為 NaN ：

let inputToParse='Invalid10';
let number;

number=parseInt(inputToParse, 10);
if (isNaN(number)) {  number=0;
}

number; //=> 0
復制代碼

解析 inputToParse 失敗，因此 parseInt(inputToParse, 10)返回 NaN。條件 if (isNaN(number)) 為 true，并且將 number 賦值為 0。

2undefined 作為操作數

把 undefined 用作加法、乘法等算術運算中的操作數會生成 NaN。

例如：

function getFontSize(style) {
  return style.fontSize;
}

const fontSize=getFontSize({ size: 16 }) * 2;
const doubledFontSize=fontSize * 2;

doubledFontSize; //=> NaN
復制代碼

getFontSize() 是從樣式對象訪問 fontSize 屬性的函數。調用 getFontSize({ size: 16 }) 時，結果是undefined（在 { size: 16 } 對象中不存在 fontSize 屬性）。

fontSize * 2 被評估為 undefined * 2，結果為 NaN。

當把缺少的屬性或返回 undefined 的函數用作算術運算中的值時，將生成 “Not A Number”。

防止 NaN 的好方法是確保 undefined 不會進行算術運算，需要隨時檢查。

3NaN 作為操作數

當算數運算的操作數為 NaN 時，也會生成NaN 值：

1 + NaN; //=> NaN
2 * NaN; //=> NaN
復制代碼

NaN 遍及算術運算：

let invalidNumber=1 * undefined;
let result=1;
result +=invalidNumber; // appendresult *=2;             // duplicate
result++;                // increment

result; //=> NaN
復制代碼

在將 invalidNumber 值（具有 'NaN'）附加到 result之后，會破壞對 result 變量的操作。

4 Indeterminate 形式

當算術運算采用不確定形式時，將會產生 NaN 值。

0/0 和 Infinity/Infinity 這樣的的除法運算：

0 / 0;               //=> NaN
Infinity / Infinity; //=> NaN
復制代碼

0 和 Infinity 的乘法運算：

0 * Infinity; //=> NaN
復制代碼

帶有不同符號的 Infinity 的加法：

-Infinity + Infinity; //=> NaN
復制代碼

5 無效的數學函數參數

負數的平方根：

Math.pow(-2, 0.5); //=> NaN
(-2) ** 0.5;       //=> NaN
復制代碼

或負數的對數：

Math.log2(-2); //=> NaN
復制代碼

總結

JavaScript 中用 NaN 表示的的“Not A Number”概念對于表示錯誤的數字運算很有用。

即使是 NaN 本身也不等于任何值。檢查變量是否包含 NaN 的建議方法是使用 Number.isNaN(value)。

將字符串形式的數字轉換為數字類型失敗時，可能會導致顯示“Not A Number”。檢查 parseInt()、parseFloat() 或 Number() 是否返回了 NaN 是個好主意。

undefined 或 NaN 作為算術運算中的操作數通常會導致 NaN。正確處理 undefined（為缺少的屬性提供默認值）是防止這種情況的好方法。

數學函數的不確定形式或無效參數也會導致 “Not A Number”。但是這些情況很少發生。 這是我的務實建議：出現了 NaN？趕快檢查是否存在 undefined！

作者：前端先鋒
鏈接：https://juejin.cn/post/6844904047787376654
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

網頁中添加視頻、聲音、動畫等，可以增強用戶體驗。在HTML5之前，為網頁添加多媒體的唯一辦法，就是使用第三方的插件（如，Adobe Flash等）。

HTML5中，提供了對多媒體的原生支持，只需通過 video 元素，就可以向網頁嵌入視頻、電影或音頻資源，通過 audio 元素向網頁嵌入音頻資源，省時省力。

一、視頻

在HTML5時代，在網頁中嵌入視頻非常簡單，只需要一個 video 元素，并設置它的 src 屬性，使其鏈接一個視頻地址就可以完全搞定了，這個太esay了

<video src="media/vedio.mp4"></video>

把這個網站在IE8中打開一看，網站上除了一片空白外，什么也沒有，這是為什么呢？

原來 video 是HTML5最新引入的元素，并不是所有瀏覽器都支持它，IE8及以下版本都無法識別 video 標簽。如果瀏覽器不識別 video標簽，則會忽略它，當做什么都沒有。這就是網站上一片空白的原因。

這個問題好解決，只需在 video 標簽之間放置文本信息，不支持 video 標簽的老瀏覽器，會顯示 video 標簽之間的文本信息，以提示用戶瀏覽器不支持 video，就這么簡單！

<video src="media/vedio.mp4">

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

在IE8上打開一看，確實顯示了提示文本，這下好多了，至少用戶知道自己的瀏覽器不能播放視頻，該換瀏覽器了。

下載了Opera瀏覽器的最新版本25.0，打開一看，怎么還是一片空白外！Opera瀏覽器明明是支持video標簽的，那又是為什么呢？

這個就得從視頻的編碼格式說起了。video 元素支持三種視頻格式：Ogg、MP4、WebM。

Ogg是帶有Theora視頻編碼和Vorbis音頻編碼的文件，后綴名為 .ogg；MP4是帶有H.264視頻編碼和AAC音頻編碼的MP4文件，后綴名為 .mp4；WebM是VP8視頻編碼和Vorbis音頻編碼的文件，后綴名為 .webm。

這個Opera瀏覽器呢，它可以支持ogg，但不支持mp4。由于Opera支持video標簽，故video標簽之間的文本信息沒有顯示出來，但它不支持ogg，所以就不進行播放，最終導致頁面出現一片空白。這下可怎么辦呢？

其實辦法有的是，我們可以從網上下載一副圖像，放到視頻播放窗口，如果視頻無法播放，就顯示這張圖片，是不是更好呢？從網上下載一張美女圖片，干脆叫beauty.jpg吧。那這個圖像怎么添加到視頻窗口呢？

video標簽有個poster 屬性，就是專門在視頻窗口放置圖片的。poster是一個video的占位符，無論什么情況下，只要視頻還沒有播放（視頻下載過程中、視頻不存在、不支持該視頻類型、用戶點擊播放按鈕前），就會顯示該圖像，可以看做是視頻播放之前插入的宣傳畫或海報。

<video src="media/vedio.mp4" poster="img/beauty.jpg">

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

在Opera瀏覽器上刷新一下，真的有一個美女沖著自己微笑呢。雖然視頻沒有播放出來，這回心情卻是好多了。

那我可不能一天到晚只看美女呀，視頻還是還是要想辦法播放出來的。既然Opera瀏覽器不支持mp4，我們就換成需要ogg吧，這樣就肯定沒問題了。

我想了想，這個辦法不好，萬一某個瀏覽器只支持支持ogg，不支持mp4呢。這年頭，什么都缺，就是不缺點子，隨便在網上一搜，辦法就有了。

在 video 元素中添加 source 元素，就可以解決這個問題。在source 元素中，通過 src 屬性指定視頻的地址，通過 type 屬性指定視頻的類型，以幫助瀏覽器決定是否能播放該視頻。并且，在 video 元素中可以添加任意多個source 元素，讓不同的 source 元素鏈接到不同的視頻文件。

這樣的話，當瀏覽器發現 video 元素時，首先會查看它本身是否定義了 src 屬性。如果沒有，就會檢查 source 元素。瀏覽器會逐個查看這些視頻源，直到找到一個可以播放的視頻。一旦找到，就會播放它并忽略其他的視頻源。我們干脆添加兩個source，一個是mp4，一個是ogg，這下視頻是一定能播放出來了。

<video poster="img/beauty.jpg">

<source src="media/vedio.mp4" type="video/mp4">

<source src="media/vedio.ogg" type="video/ogg">

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

在Opera瀏覽器上又刷新一下，只有美女沖著我微笑，視頻還是沒播放出來。唉，太粗心了，忘記添加播放視頻的控件了。

在video標簽中，通過添加controls 屬性來為視頻添加播放控件，方便用戶執行播放、暫停操作和音量控制。

<video poster="img/beauty.jpg" controls>

（此處略去500字…）

</video>

在Opera瀏覽器上又刷新一下，效果真的不一樣，這次不僅看到美女，還看到了視頻控件。用鼠標猛戳一下那個播放按鈕，哈哈，不錯，真的聽到美妙的旋律。我們的ogg文件，終于播放出來了，讓我們好好享受一下吧O(∩_∩)O。

聽了一會，忽然一想，不對呀，我剛才點了播放按鈕后，等了半天才聽到聲音。能不能我一點播放按鈕，就立即播放呢？

原來視頻也是需要下載緩存的，點擊播放按鈕后，首先緩存，然后才播放的。那能不能在頁面加載的同時就緩存呢。這樣，用戶點擊播放后，就不必等待了。

這當然可以，在video標簽中，通過添加preload屬性來為視頻添加預加載功能，在頁面加載的同時加載視頻。

<video poster="img/beauty.jpg" controls preload>

（此處略去500字…）

</video>

關于 preload 屬性，稍微再啰嗦一點，就是可以把它設置為 metadata，讓瀏覽器僅僅預加載視頻的基本信息，如尺寸、時長、以及一些關鍵的幀。這樣的話，在開始播放之前，瀏覽器可以提前計算視頻的顯示尺寸。

既然一切都OK了！讓我們看看mp4是不是能正常播放。下載最新版的Google Chrome 38.0瀏覽器，打開網頁，猛戳一下播放按鈕。

等等~，等等~，不對，怎么只有聲音沒有畫面，明明是mp4格式的文件呀？使用暴風影音試了一下，是有畫面的呀！

辛辛苦苦又在網上搜了一番，花了整整586秒，終于找到了答案。mp4視頻需要h.264編碼格式才會有圖像的。

找了一個 h.264 編碼格式的 mp4 試了一下，不錯，確實有圖像了！看了半天，原來是一部老外的電影，嘰里咕嚕一陣，一句話也沒聽懂。那O(∩_∩)O~，能否提供中文字幕呢，這樣就不必費老大勁去聽了！

HTML5中，通過在video元素添加track元素為視頻添加字幕。字幕文件有兩種格式：WebVTT和TTML。WebVTT是Web視頻文本軌跡（Web Video Text Track），是UTF-8編碼格式的文本文件；TTML是時序文本標記語言（Timed Text Markup Language），是XML格式的文件。兩種文件的具體格式，已經超出我們的討論范圍。

video元素支持添加多個track元素，不同的track元素鏈接到不同的字幕文件。用戶可以在各個字幕間進行切換。

<video poster="img/beauty.jpg" controls preload>

<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>

<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡體中文">

</video>

track元素中，src屬性指定字幕文件的URL；srclang屬性字幕文件的語言類型，若kind 屬性值是 "subtitles" 時，該屬性必需的；label 屬性指定字幕標簽，每個字幕元素必需設置一個唯一不重復的標簽，切換字幕時，會顯示標簽的名稱；kind指定字幕內容類型，只能是subtitles、captions、descriptions、chapters、metadata 之一；default屬性指定是否是默認字幕，如果一個都沒指定，將不會自動顯示字幕。

除了字幕外，我還希望對視頻進行過多的控制，比如讓視頻自動播放、循環播放、默認靜音，以及視頻窗口的尺寸等等，這些都能做到嗎？

這已經不是什么事了，video 元素已經提供了相關屬性，根據需要設置相應的屬性就可以了。這些屬性及含義見表 23：

哦，原來這么簡單呀！那就到此為止吧，網頁中嵌入視頻的全部代碼都在這里，就打包給你吧！

<video width="300" poster="img/beauty.jpg" controls preload autoplay loop muted>

<source src="media/vedio.mp4">

<source src="media/vedio.ogg">

<track src="en_track.vtt" kind="subtitles" srclang="en" label="English" default>

<track src="cn_track.vtt" kind="captions" srclang="zh" label="簡體中文">

你的瀏覽器已經老掉牙了，不支持video，還不趕快使用現代瀏覽器O(∩_∩)O~！

</video>

睜大眼睛一看，卻只有7行代碼。然而，就這區區7行代碼，可把他折磨得夠嗆。

看著這一切都全部搞定，他仰望著天空，長長呼了一口氣，顯得是那么的放松，那么的愜意。此時，他閉上眼睛，在自己的夢幻世界里遨游！

二、音頻

有了在網頁中嵌入視頻的經歷，要在網頁中嵌入音頻，那簡直就是小菜一碟了。只要把vedio元素換成 audio 元素，就全部搞定。

但需要了解的是，audio 所支持的音頻格式只有Ogg Vorbis、mp3 和 wav。還要知道，由于音頻沒有畫面，也就沒有 width、height、poster 屬性，而其他屬性都支持，并且跟視頻的含義相同。

網頁中嵌入音頻的代碼如下：

<audio controls preload autoplay loop muted>

<source src="media/audio.mp3">

<source src="media/audio.wav">

<source src="media/audio.ogg">

你的瀏覽器已經老掉牙了，不支持audio，還不趕快使用現代瀏覽器O(∩_∩)O~！

</audio>

<meta id="viewport" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1; user-scalable=no;">

meta name="format-detection" content="telephone=no"
 meta name="format-detection" content="email=no"
 meta name="format-detection" content="adress=no"