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 粼粼的林林總總
7會員
32內容數
不定期地分享程式/旅遊/學習/閱讀或各式各樣的文章,如果對我的分享有興趣,歡迎來找我玩~
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
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
vocus 慶祝推出 App,舉辦 2026 全站慶。推出精選內容與數位商品折扣,訂單免費與紅包抽獎、新註冊會員專屬活動、Boba Boost 贊助抽紅包,以及全站徵文,並邀請你一起來回顧過去的一年, vocus 與創作者共同留下了哪些精彩創作。
Thumbnail
練習目標 這篇是我的前端練習記錄,透過 CodePen 製作一個小功能:「點一下按鈕,就讓整個畫面換個背景色」。 這個練習適合剛開始學習 HTML、CSS、JavaScript 的人,幫助理解: 按鈕怎麼綁定事件 JavaScript 怎麼控制畫面樣式 如何產生隨機顏色 練習畫面預覽
Thumbnail
練習目標 這篇是我的前端練習記錄,透過 CodePen 製作一個小功能:「點一下按鈕,就讓整個畫面換個背景色」。 這個練習適合剛開始學習 HTML、CSS、JavaScript 的人,幫助理解: 按鈕怎麼綁定事件 JavaScript 怎麼控制畫面樣式 如何產生隨機顏色 練習畫面預覽
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
這篇文章深入淺出地解釋 JavaScript 中表達式 (expression) 與陳述式 (statement) 的差異,並以 React 中 JSX 的應用為例,說明為何大括號 {} 內只能放入表達式。文章以類比人類語言的句子結構來幫助理解,並提供相關參考資料連結。
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
iFrame在微前端架構中的優缺點,分析了其對用戶體驗、SEO及性能的影響。 iFrame在嵌入小型UI元件、創建隔離環境等特定場景中仍具備相當的應用價值。
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
本文介紹如何使用Vite建立前端開發初始檔案,並加入Tailwindcss的教學。透過指令和配置檔,讓你能快速建立個人專案的開發環境,並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等,幫助你進一步學習。
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
為什麼要登出使用者? 安全性:防止未經授權的人,在使用者暫離時使用系統,這在公用或共享電腦的環境中尤其重要。 資料保護:只要使用者處於登入狀態,就會暴露在個人資料被他人操縱或利用的風險中,因此登出閒置使用者對資安也很重要。 如何在 Vue 3 專案中實作此功能?
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
這一集用最新的Vite工具去創建初始檔案。Vite用於創建和構建Web應用程序,具有快速的啟動時間、即時熱更新、小型體積、支持多種框架和可擴展性等優點。
Thumbnail
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
Thumbnail
隨著科技發展迅速,軟體職缺需求大增長,有些朋友對IT產業有興趣並想成為一位軟體工程師,但不知道從哪裡下手,透過傳統學校、培訓班或自學等不同方法,有多種學習路徑可以選擇。此外,還提供了一些額外資源教學連結,方便讀者進一步提升相關技能。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News