跳至主要内容

JavaScript 命名慣例

不常開發 Javascript 相關程式,經常亂命名,
雖不影響功能,但...見人該說人話
將慣例放這邊用來提醒自己
看看下方 Javascript 人的用法,有夠囉嗦!

變數、函式:camelCase

    let userName = "Totem";
function fetchUserData() {}
const isUserLoggedIn = true;

類別 Class 與建構函式:PascalCase

    class UserProfile {}
class BlogPost {}

檔案 與 模組名稱: kebab-case

    user-profile.js
blog-post-service.js

常數 Constant:ALL_CAPS_SNAKE_CASE

    const MAX_USERS = 100;
const PI = 3.14;
const API_BASE_URL = "https://example.com";

NPM 套件名稱 與 plugin 名稱:kebab-case

    docusaurus-plugin-image-optimizer
eslint-config-prettier
my-awesome-lib

命名範例對照表

用途範例命名風格
變數/函式getUserInfo()camelCase
類別UserProfilePascalCase
常數MAX_LIMITALL_CAPS
檔案名user-profile.jskebab-case
Plugin 名my-pluginkebab-case
React 元件UserCard.jsxPascalCase