JavaScript 入門:JS 怎麼判斷資料型別

更新 發佈閱讀 8 分鐘

因為 JavaScript 是動態型別語言,變數的型別可以隨時改變,如果沒有型別檢查,很容易發生隱性的錯誤。正確判斷資料型別對於避免錯誤實在是太重要。在 JavaScript 中有很多種判斷資料型別的方法,各自用法都不大相同,本篇文章將詳細講解各種方法,並解析這些方法的常見陷阱,避免踩雷!!

JavaScript 的資料型別

JavaScript 的資料型別分為 Primitive(原始型別)Object(物件型別),除了七種 Primitive 之外,其他所有值本質上都是 Object。

原生值

  1. string
  2. number
  3. boolean
  4. undefined
  5. null
  6. symbol
  7. bigint

物件

除了上述七個資料型別,其他像是 function、array、date 等都是物件。

關於 JS 中的詳細資料型別可參考:【JavaScript 入門:資料型別一次搞懂! Primitive 與 Object 的差異

typeof 運算子

最常用的型別判斷方法就是 typeoftypeof 是一個運算子,會返回一個代表資料型別的字串。

typeof 基本上可以判別上述提到的七個原生值與一個物件,但是! typeof 有幾個例外

例外一:primitive 的 null

console.log(typeof null); // object

關於 null 會被 typeof 判斷為 object 似乎是個歷史遺留的問題,據說因為修復成本太高所以一直擺著沒有修XD

其他 primitive

console.log(typeof "Hello");    // string
console.log(typeof 123 ); // number
console.log(typeof true); // boolean
console.log(typeof undefined ); // undefined
console.log(typeof 10n); // bigint
console.log(typeof Symbol()); // symbol

例外二:object 的 function

console.log(typeof function func(){}); // function

function 是唯一一個「object 卻會回傳 function」的例外。

其他 object

console.log(typeof []);         // object
console.log(typeof {}); // object
console.log(typeof new Date); // object
console.log(typeof new RegExp); // object

判斷陣列

前面提到,所有的 *object* 用 typeof 判斷都會輸出「object」,如果想要判斷一個物件是不是陣列的話,可以用 Array.isArray(value) 方法。

範例

console.log(Array.isArray([]));  // true
console.log(Array.isArray({})); // false

判斷物件種類

我們可以透過 instanceof 這個運算子判斷一個變數是否為特定物件,概念和 typeof 有點像,但是僅限用於 object !!

console.log([] instanceof Array);         // true
console.log({} instanceof Object); // true
console.log(new RegExp instanceof RegExp);// true
console.log(new Date instanceof Date); // true
console.log("str" instanceof String); // false,不能判斷 primitive
  • 上面的 "str" 會判斷 false 是因為他不是用 new String("str") 建立的,如果用 new 建立一個這樣的「物件」,就會讓輸出結果完全不同!

還有一點要注意,其實 instanceof 有一個小陷阱,就是「幾乎所有物件都會 instanceof Object」,因為他們都是繼承自 Object。

這段內容攸關原型 (Prototype) 與原型鏈 (Prototype Chain) 的概念,以後有機會再寫一篇相關文章 ><
console.log([] instanceof Object);       // true
console.log(new Date instanceof Object); // true

萬用判斷方法

那如果真的很想要準確判斷這個值到底是誰! 是number、boolean、 array、object 還是 function,就可以用 Object.prototype.toString.call(value) 判斷。

範例

console.log(Object.prototype.toString.call(null));  // [object Null]
console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call("str")); // [object String]
console.log(Object.prototype.toString.call([1,2])); // [object Array]
​console.log(Object.prototype.toString.call({a:3})); // [object Object]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]

總結

JavaScript 的判斷資料型別看似簡單,實則不簡單,其實隱藏著不少細節與陷阱。由於 JavaScript 是動態型別語言,變數的型別可以隨時改變,因此在實務開發中做好型別判斷,是避免隱性錯誤的重要關鍵。

快速總結一下本篇的重點:

  • 想快速判斷基本型別,用 typeof
  • 想判斷陣列,用 Array.isArray()
  • 想確認物件類型,用 instanceof
  • 想要最精準結果,用 Object.prototype.toString.call()

相較於 typeofinstanceofObject.prototype.toString.call() 是最穩定且最精準的型別判斷方式(雖然很長一句但是讚)。


​參考

  1. typeof
  2. instanceof
  3. JavaScript 有哪些資料型別 (data types)? 該怎麼辨別一個變數的資料型別?
  4. Object.prototype.toString()


留言
avatar-img
Elaine 粼粼的林林總總
12會員
40內容數
不定期地分享程式/旅遊/學習/閱讀或各式各樣的文章,如果對我的分享有興趣,歡迎來找我玩~
2026/02/20
深入淺出講解 JavaScript 的單執行緒特性,以及事件循環 (Event Loop)、Call Stack、Web APIs、Task Queue、Microtask Queue 如何協同工作,實現非同步操作,讓 JavaScript 程式碼不會被長時間任務阻塞。
2026/02/20
深入淺出講解 JavaScript 的單執行緒特性,以及事件循環 (Event Loop)、Call Stack、Web APIs、Task Queue、Microtask Queue 如何協同工作,實現非同步操作,讓 JavaScript 程式碼不會被長時間任務阻塞。
2026/02/19
在現代 JavaScript 開發中,「非同步操作」無所不在,如果沒有良好的非同步處理方式,程式碼容易變得混亂難維護。JavaScript 的非同步處理方式經歷了 Callback、Promise、Async / Await。本文將逐步介紹非同步函式的演進過程。
2026/02/19
在現代 JavaScript 開發中,「非同步操作」無所不在,如果沒有良好的非同步處理方式,程式碼容易變得混亂難維護。JavaScript 的非同步處理方式經歷了 Callback、Promise、Async / Await。本文將逐步介紹非同步函式的演進過程。
2026/02/14
本文介紹 JavaScript 中的同步與非同步概念,透過簡單的程式範例說明兩者的執行順序差異,並解釋為什麼 setTimeout 會在主程式執行完後才觸發回呼函式。說明非同步的重要性及它如何避免耗時任務阻塞主執行緒。
2026/02/14
本文介紹 JavaScript 中的同步與非同步概念,透過簡單的程式範例說明兩者的執行順序差異,並解釋為什麼 setTimeout 會在主程式執行完後才觸發回呼函式。說明非同步的重要性及它如何避免耗時任務阻塞主執行緒。
看更多
你可能也想看
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
Thumbnail
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
Thumbnail
在 2021 年的剛轉職成為前端工程師的時候,我在面試時滿常會被詢問到 JavaScript 中閉包的議題,當時候自己回答的滿差的,於是在 2022 年時,我寫了一系列的有關於函式程式設計鐵人賽的文章, 裡頭就有簡單提到有關於閉包的議題。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
練習目標 這篇是我的前端練習記錄,透過 CodePen 製作一個小功能:「點一下按鈕,就讓整個畫面換個背景色」。 這個練習適合剛開始學習 HTML、CSS、JavaScript 的人,幫助理解: 按鈕怎麼綁定事件 JavaScript 怎麼控制畫面樣式 如何產生隨機顏色 練習畫面預覽
Thumbnail
練習目標 這篇是我的前端練習記錄,透過 CodePen 製作一個小功能:「點一下按鈕,就讓整個畫面換個背景色」。 這個練習適合剛開始學習 HTML、CSS、JavaScript 的人,幫助理解: 按鈕怎麼綁定事件 JavaScript 怎麼控制畫面樣式 如何產生隨機顏色 練習畫面預覽
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News