跳到主要內容

[鐵人賽] JS 基本解說,變數型別,宣告 - Node.js Day 6

JS 基本解說,變數型別,宣告

前言

前面已經有建立基本的 Node.js ,以及第一個基本範例,在開發 Node.js 之前,讓我們先建立 JavaScript 應該要知道的一些基本觀念。

本文開始

在進入 node.js 開發之前,還是必須要說, node.js 雖然稱為 node.js ,不過本質在開發上還是在寫 JavaScript。對於 JavaScript 的基本認知還是要有。

基本型態

JavaScript 有以下幾種基本型態。
  • Boolean
  • Number
  • String
  • null
  • undefined
變數宣告的方式,就是使用 var,結尾使用『;』,如果需要連續宣告變數,可以使用 『,』 做為連結符號。
// 宣告 x 為 123, 數字型態
var x=123;

// 宣告 a 為456, b 為 'abc' 字串型態
var a=456,
    b='abc';

布林值

布林,就只有兩種數值, true, false
var a=true,
    b=false;

數字型別

Number 數字型別,可以分為整數,浮點數兩種,
var a=123,
    b=123.456;

字串型別

字串,可以是一個字,或者是一連串的字,可以使用 ‘’ 或 “” 做為字串的值。
var a="a",
    a='abc';

運算子

基本介紹就是 +, -, *, /
邏輯運算就是 && (and), || (or), ^ (xor),
比較式就是 >, <, !=, !==, ==, ===, >=, <=

判斷式

這邊突然離題,加入判斷式來插花,判斷就是 if,整個架構就是,
if (判斷a) {
    // 判斷a 成立的話,執行此區域指令
} else if (判斷b) {
    // 判斷a 不成立,但是 判斷b 成立,執行此區域指令
} else {
    // 其餘的事情在這邊處理
}
整體架構就如上面描述,非 a 即 b的狀態,會掉進去任何一個區域裡面。
整體的判斷能夠成立,只要判斷轉型成 Boolean 之後為 true,就會成立。
大家可以這樣子測試,
Boolean(判斷);

應用

會突然講 if 判斷式,因為,前面有提到 Number, String 兩種型態,但是如果我們測試一下,新增一個 test.js
var a=123,
    b='123';

if (a == b) {
    console.log('ok');
}
編輯 test.js 完成之後,執行底下指令
node test.js
// print: ok
輸出結果為 ok。
這個結果是有點迥異, a 為 Number, b 為 String 型態,兩者相比較,應該是為 false 才對,到底發生什麼事情?
這其中原因是,在判斷式中使用了 == , JavaScript 編譯器,會自動去轉換變數型態,再進行比對,因此 a == b 就會成立,如果不希望轉型產生,就必須要使用 === 做為判斷。
if (a === b) {
    console.log('ok);
} else {
    console.log('not ok');
}
// print: not ok

轉型

如果今天需要將字串,轉換成 Number 的時候,可以使用 parseInt, parseFloat 的方法來進行轉換,
var a='123';

console.log(typeof parseInt(a, 10));
使用 typeof 方法取得資料經過轉換後的結果,會取得,
number
要注意的是,記得 parseInt 後面要加上進位符號,以免造成遺憾,在這邊使用的是 10 進位。

後記

在本篇中,先講解變數的宣告,以及 Boolean, Number, String 幾種形態,以及 if 判斷式怎麼使用,在 JavaScript 這種弱型態的語言當中,有些時候會因為自動轉型造成 debug 的麻煩,因此也稍微提到在實際開發可能會遇到的問題。
前面基本型態有提到 null, undefined ,明天我們繼續聊聊這兩種在 JavaScript 型別中,難以判定的型態。

留言

這個網誌中的熱門文章

Vibe Coding:到底?氛圍驅動程式開發必殺技?

Vibe Coding(氛圍編程) 是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的革命性程式開發方式,它讓開發者透過自然語言與 AI 對話來生成程式碼,徹底改變了傳統的編程模式。 這種開發方式的核心理念是 「順著感覺走」 ,讓 AI 處理技術細節,開發者專注於創意和需求描述。 Vibe Coding 需要基本上的規劃和執行,但並沒有強制規範,從日常經驗來說可分為三個階段, 前期準備、開發過程、和後期維護 三個關鍵階段。每個階段都有其特定的任務和注意事項,正確執行這些步驟將大幅提升開發效率和程式品質。 將靈感與需求透過 AI 快速轉化成產品功能或原型。以下幫你分成 「前、中、後」 三階段要做的事情,適合你自己做、或帶團隊做 前期:設定 vibe & 準備素材 這個階段的重點是 「建立開發語境」 ,因為 AI 的生成表現高度依賴前期提供的上下文與資料。 明確目標 :釐清要解決的問題、預期要做的功能與核心價值。例如在筆記軟體的情境中,可能是:「我要做一款讓使用者能用 Markdown 記錄筆記,並提供標籤與全文搜尋功能的簡單 App。」 收集靈感 :觀察同類產品(如 Obsidian、Notion)、蒐集市場痛點(例如太多筆記軟體無法脫機使用,或同步效能差)。 建立語境 :準備初步 prompt、背景知識、產品定位、品牌調性、目標使用者輪廓等。 確認資源 :決定用哪些工具(Gemini、ChatGPT、設計軟體、流程管理工具等)。 確認完上述內容之後,就可以先開始進行準備規格,進行第一次的 Vibe Coding 方向驗證 提示詞模板準備 很多人會跳過這步驟,但一份 「好的 AI 提示詞模板」 將決定接下來每一次 AI 對話的品質。有效的提示詞模板需具備: 描述具體且無歧義 包含技術要求和約束條件 提供範例資料和測試案例 指定程式碼風格和慣例 例如針對筆記軟體的案例:   「建立一個支援 AI 功能純文字筆記,輸入內容可即時渲染;需支援儲存到本地檔案,提供標籤欄位做分類;以 React 架構,程式風格採用 Tailwind style components 並使用 hooks。」 開發工具選擇 開發工具的選擇 同樣重要,目前市場上主要的 ...

Claude Code Hooks:自動化與安全的最佳實踐

寫在最前頭,這份文章主要寫起來是給自己看, 同時內容是比較適合開發者,工程師們可以做些自動化處理的簡單筆記。 Claude Code hooks Claude Code hooks 是一種強大的自動化機制,允許用戶在 Claude Code 的不同生命週期階段,自定義執行 shell 指令。這種設計讓開發者能夠將規則和自動化行為嵌入到應用層級,確保每次都能可靠執行,而不必依賴 LLM(大型語言模型)是否會選擇執行某項操作。 Hooks 的核心用途 通知 :自訂收到 Claude Code 等待用戶輸入或執行權限時的提醒方式。 自動格式化 :如在每次檔案編輯後自動執行 prettier (針對 .ts 檔)、 gofmt (針對 .go 檔)等。 日誌記錄 :追蹤所有執行過的命令,便於合規或除錯。 自動反饋 :當 Claude Code 產生不符合團隊規範的程式碼時,自動給出反饋。 自訂權限 :阻擋對生產環境檔案或敏感目錄的修改[^1]。 配置與結構 Hooks 透過設定檔進行配置,分為全域( ~/.claude/settings.json )、專案( .claude/settings.json )、本地專案( .claude/settings.local.json )以及企業級策略設定。每個 hook 由「事件名稱」和「匹配器」組成: "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "jq -r '...'" } ] } ] } matcher :用於匹配工具名稱(支援正則表達式),如 Write 、 Edit|Write 、 Notebook.* 。 hooks :當匹配時要執行的命令陣列。 type :目前僅支援 "command" 。 ...

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。