JavaScript 變量

量是用于存儲信息的"容器"。

實例

var x=5;

var y=6;

var z=x+y;

就像代數那樣

x=5

y=6

z=x+y

在代數中，我們使用字母（比如 x）來保存值（比如 5）。

通過上面的表達式 z=x+y，我們能夠計算出 z 的值為 11。

在 JavaScript 中，這些字母被稱為變量。

JavaScript 變量

與代數一樣，JavaScript 變量可用于存放值（比如 x=5）和表達式（比如 z=x+y）。

變量可以使用短名稱（比如 x 和 y），也可以使用描述性更好的名稱（比如 age, sum, totalvolume）。

變量必須以字母開頭
變量也能以 $ 和 _ 符號開頭（不過我們不推薦這么做）
變量名稱對大小寫敏感（y 和 Y 是不同的變量）

JavaScript 數據類型

JavaScript 變量還能保存其他數據類型，比如文本值 (name="Bill Gates")。

在 JavaScript 中，類似 "Bill Gates" 這樣一條文本被稱為字符串。

JavaScript 變量有很多種類型，但是現在，我們只關注數字和字符串。

當您向變量分配文本值時，應該用雙引號或單引號包圍這個值。

當您向變量賦的值是數值時，不要使用引號。如果您用引號包圍數值，該值會被作為文本來處理。

實例

var pi=3.14;

var person="John Doe";

var answer='Yes I am!';

聲明（創建） JavaScript 變量

在 JavaScript 中創建變量通常稱為"聲明"變量。

我們使用 var 關鍵詞來聲明變量：

var carname;

變量聲明之后，該變量是空的（它沒有值）。

如需向變量賦值，請使用等號：

carname="Volvo";

不過，您也可以在聲明變量時對其賦值：

var carname="Volvo";

在下面的例子中，我們創建了名為 carname 的變量，并向其賦值 "Volvo"，然后把它放入 id="demo" 的 HTML 段落中：

實例

var carname="Volvo";

document.getElementById("demo").innerHTML=carname;

嘗試一下 ?

一條語句，多個變量

您可以在一條語句中聲明很多變量。該語句以 var 開頭，并使用逗號分隔變量即可：

var lastname="Doe", age=30, job="carpenter";

聲明也可橫跨多行：

var lastname="Doe",

age=30,

job="carpenter";

Value = undefined

在計算機程序中，經常會聲明無值的變量。未使用值來聲明的變量，其值實際上是 undefined。

在執行過以下語句后，變量 carname 的值將是 undefined：

var carname;

重新聲明 JavaScript 變量

如果重新聲明 JavaScript 變量，該變量的值不會丟失：

在以下兩條語句執行后，變量 carname 的值依然是 "Volvo"：

var carname="Volvo";

var carname;

JavaScript 算數

您可以通過 JavaScript 變量來做算數，使用的是 = 和 + 這類運算符：

實例

y=5;

x=y+2;

您可以把變量看做存儲數據的容器。

JavaScript 語句和 JavaScript 變量都對大小寫敏感。

一個好的編程習慣是，在代碼開始處，統一對需要的變量進行聲明。

文首發自「慕課網」，想了解更多IT干貨內容，程序員圈內熱聞，歡迎關注！

作者|慕課網精英講師然冬

變量就是存放一些內容的容器。

對于初學者，理解變量是重要的一環。

從分析變量這個名詞，可以知道他是一個可以改變的量，這里的量就是代表某一種值。

在 JavaScript 中，變量就是一個用來存放值的容器，并且可以對容器中的值做修改。

每個變量都有唯一的變量名，使用變量名來區分變量。

1. 聲明變量

在 JavaScript 中使用var關鍵字來聲明變量。

var 存放數字用的變量 = 996;

console.log(存放數字用的變量); // 輸出：996
代碼塊123

上述這段代碼就是申明了一個名為存放數字用的變量的變量，并且將它的值設為996。

使用 console.log，括號內放置變量名，即可將變量的值輸出在控制臺。

其中 // 后面的內容為注釋，代碼執行過程中會被忽略。

雖然使用中文作為變量名在 chrome 瀏覽器下沒有報錯，但是還是不建議使用。

常規場景中不會有使用中文名作為變量的情況。

所以上述例子中的變量名不可取。

var number = 996;

console.log(number); // 輸出：996
代碼塊123

將存放數字用的變量修改成 number ，執行結果是一樣的。

2. 賦值

給變量設置值的操作稱為賦值操作。

2.1 最簡單的賦值操作

var result = 0;

console.log(result); // 輸出：0
代碼塊123

這是一個最簡單的賦值操作，直接將值賦給變量。

通常只有一個等號出現的情況下就存在賦值操作。

2.2 將計算結果賦值給變量

var result = 2 + 3;

console.log(result); // 輸出：5
代碼塊123

這也是一個賦值操作，只不過等號右邊的 2 + 3 會被計算出結果（計算的方式和小學開始學習的自然數學一樣），再賦給變量 result。

將上面這個例子做一個簡單的改寫：

2.3 讓變量也參與計算

var number1 = 2;
var number2 = 3;

var result = number1 + number2; // 2 + 3

console.log(result); // 輸出：5
代碼塊123456

原本 2 + 3 這部分也可以被變量所代替，參與計算的就是變量中的值。

2.4 改變變量的值

var string = '今天加班？';

console.log(string); // 輸出：今天加班？

string = '福報！';

console.log(string); // 輸出：福報！
代碼塊1234567

注意：
這里賦給變量的值和之前有點不一樣，是中文文字。
當需要用變量存放一些“字”的時候，就需要用單引號'或者雙引號"將需要存放的字包裹。
通常單個字會稱之為字符，多個字的時候稱為字符串。
這里做個了解，具體的會在后續數據類型章節詳細展開討論。

這段代碼運行后可以在控制臺觀察到有兩個輸出，分別對應變量的值。

代碼很簡單，先聲明了一個叫 string 的變量，并賦值字符串今天加班？并輸出，隨后修改了他的值，重新賦值了字符串福報！。

這是變量最重要的一個特性：可變。

3. 變量的命名規范

在 JavaScript 中變量名存在一定規范，所有變量名必須符合這些規范，否則程序無法執行。

3.1 變量名必須使用字母、下劃線(_)、美元符號($)開頭

盡管之前的例子有用到中文作為變量名，但是是不推薦的。

// 不會報錯但是不推薦
var 數字 = 1;
// 錯誤
var 1number = 1;
// 錯誤
var number@a = 1;
// 錯誤
var num+aa = 2;

//下面是正確的方式
var number1 = 1;
var _number = 1;
var $number = 1;
代碼塊12345678910111213

以上是一些簡單的示例，可以根據規則自己在控制臺嘗試尋找規則。

3.2 變量對大小寫敏感

// 這是兩個不同的變量
var firstName = 'Hello';
var firstname = 'hello';
代碼塊123

以上是兩個不同的變量，在 JavaScript 中變量是對大小寫敏感的。

兩個變量名即便字母是相同的，但是大小寫不同，就不能算做一個變量。

3.3 無法使用關鍵字作為變量名

關鍵字就是指一些已經被 JavaScript 預定義或者保留下來的內容，如聲明變量用的關鍵字 var 就不能作為變量名。

var var = 1; // Uncaught SyntaxError: Unexpected token 'var'
代碼塊1

上面這段代碼嘗試著將 var 作為變量，到控制臺運行是會報錯的。

4. 合理規范的變量名

剛開始學習的讀者，現在去深究如何命名一個變量還有些尚早，因為結合了具體的需求場景才能體會到一個好的變量名的重要性。可以先在此做個了解。

對于變量名，除了上面提到的變量命名的規范，最需要注意的就是給變量起一個有意義的名字。

如求和：

var num1 = 1;
var num2 = 2;
var num3 = 3;
var num4 = 4;

var count = num1 + num2 + num3 + num4;
代碼塊123456

其中num是number的縮寫，是很常用的一種縮寫。

count則是總數，表示求和的結果。

如果將上述例子做如下修改：

var a = 1;
var b = 2;
var c = 3;
var d = 4;

var e = a + b + c + d;
代碼塊123456

缺少了有意義的變量名就比較難看出代碼具體在做什么。當然這段代碼本身意義就不大，場景太過簡單。

剛才提到的縮寫，其實也是要注意的一點，縮寫上一定要使用通用的縮寫，如含有fn表示一個功能或者函數，avg 表示平均值，pwd 表示密碼，i18n 為國際化。

這些縮寫比較通用，大部分開發者都可以看得懂。隨著編碼經驗的增加，會在他人代碼里見到大量的縮寫，從而累積到自己的大腦的縮寫庫中。

最后需要注意的一點是業務中盡量不要含有中文拼音或中文拼音的縮寫，排開鄙視鏈的原因，最大的問題是會讓變量名變得冗長難懂。

以上內容在寫 demo 或者測試功能的時候可以不需要考慮，寫 demo 等大部分情況是為了驗證自己的猜想。

// 不合理的變量名
var ln = 'World'; // last name
var zs = 0; // 總數
var jinNianDeNianShouRu = 1999999999; // 今年的年收入
代碼塊1234

以上是針對變量名的意義展開的討論。

還有需要注意的是變量命名的格式，大部分前端程序員會使用駝峰命名法，也就是第一個字母小寫，后續如果有新的單詞來進行構成，單詞的第一個字符都大寫。

如：

var firstName = 'Hello';

var lastName = 'world';

var createAt = 1577895179196;

var userInfo = '用戶信息'; // Info => Information

var isPaidUser = '是否付費用戶';
代碼塊123456789

可以見到上面的變量，從構成變量名的第二個單詞開始，首字母都是大寫，這就是駝峰命名的格式，本 Wiki 所有變量名使用的就是這種格式。

當然還有大駝峰，就是第一個字母也大寫。

除此之外最常用的還有使用下劃線分隔變量，如 user_info，還有按功能來劃分的變量名，如使用匈牙利命名法，這里不再做展開。

5. 有關變量的其他知識

5.1 變量的默認值

變量在聲明的時候，如果沒有賦值，則變量就會有一個默認值 undefined。

var total;

console.log(total); // 輸出：undefined
代碼塊123

undefined 是一種是數據類型，具體內容可以參考數據類型章節。

5.2 同時聲明多個變量

使用一個 var 關鍵字就可以直接聲明多個變量。

var num1 = 0, num2 = 1;

// 通常會換行，方便閱讀代碼
var num3 = 2,
    num4 = 3,
    num5 = 4,
    num6,
    num7 = 6;
代碼塊12345678

在一個變量聲明后，使用逗號分隔，緊接著聲明下一個變量即可。

通常使用一個 var 聲明多個變量的時候也會換行，方便后續閱讀，并保持代碼格式上的整潔清晰，防止一行過長。

5.3 變量在 window 上

在最外層聲明的變量（不包括 ES6 模塊的情況），實際上是變成了 window 對象的一個屬性。

var number = 996;

console.log(number); // 輸出：996
console.log(window.number); // 輸出：996
代碼塊1234

上述代碼執行后輸出的兩個內容是一樣的，都為 996。有關 window 對象的內容可以參考 BOM 章節。

細心的讀者應該會注意到最外層這個條件，因為變量還有可能聲明在函數之中，函數有自己獨立的作用域，通常在函數中使用 var 關鍵字聲明的變量，只在函數中有效。

至于為什么可以省略 window 直接訪問到變量，可以參考作用域鏈章節。

5.4 不使用 var 關鍵字聲明的變量

假如不使用 var 關鍵字，直接創建變量并賦值：

total = 10;

console.log(total); // 輸出：10
代碼塊123

在控制臺運行后會發現其實并沒有報錯，輸出的結果也正常。

在非ES6模塊中，這樣創建的變量和使用 var 創建的變量除了不能提前使用之外，沒有其他大的區別，會被直接作為 window 對象的屬性，成為全局變量。

即便是在函數或者其他存在塊級作用域的環境中，這樣聲明的變量也會作為全局變量。

5.5 連續賦值

var a = b = 1;
代碼塊1

假如把上面這行代碼拆開來可以理解成是這樣的：

b = 1;
var a = b;
代碼塊12

看似沒什么問題，許多開發者也會用這種方式同時聲明多個變量，但如果在函數或者獨立的作用域中，b 就會成為全局變量，造成全局命名空間的污染。

5.6 重復聲明變量

按照之前說的，變量在聲明的時候如果沒有賦值，則會是 undefined，這個規則在重復聲明的情況下不適用。

var num = 1;
var num;

console.log(num); // 輸出：1
代碼塊1234

觀察上面這個例子輸出的結果，可以發現變量 num 的值并沒有改變。

但是如果重新聲明的同時做賦值操作，值就會改變。

var num = 1;
var num = 3;

console.log(num); // 輸出：3
代碼塊1234

這個例子輸出的結果，就是再次聲明并賦值后的值。

5.7 提前使用變量

console.log(number); // 輸出：undefined

var number = 1;
代碼塊123

這個例子先輸出了 number 的值，再聲明并對其進行賦值。

代碼并沒有報錯，但如果沒有第二行聲明，只輸出 number：

console.log(number); // Uncaught ReferenceError: number is not defined
代碼塊1

這樣子會爆出變量未定義的錯誤，說明變量是可以被提前使用，只是沒有值，或者說是 undefined 默認值。

具體原因可以參考執行上下文章節。

這里簡單的解釋可以理解成，在瀏覽器執行的時候，會把代碼調整成如下樣子：

var number;

console.log(number); // 這個時候 number 還沒有被賦值，所以輸出 undefined

number = 1;
代碼塊12345

5.8 常量

常量就是定義并賦值后再也不能修改的量，通常一些不會改變的量，如配置、物理值等會聲明為常量，在 ES6 之前是沒有提供常量這一特性的。

但是根據常量自身的特性，定義賦值后不能被修改，就可以通過一些方式來模擬常量。

第一種就是采用約定的形式，通常常量都是大寫，不同單詞之間用下劃線分隔。

var PI = 3.1415926535;

var DB_ACCOUNT = 'root';
var DB_PASSWORD = 'root';
代碼塊1234

這種方式定義的常量本質上還是變量，值還是可以修改的，但因為命名格式采用國際慣例，一眼就能看出是常量，不會對其修改。

這種方式是最簡單的方式，但不安全。

第二種方式就是利用對象下屬性的描述來控制可寫性，將對象的屬性設置為只讀。

var CONFIG = {};

Object.defineProperty(CONFIG, 'DB_ACCOUNT', {
  value: 'root',
  writable: false,
});

console.log(CONFIG.DB_ACCOUNT); // 輸出：root

CONFIG.DB_ACCOUNT = 'guest';

console.log(CONFIG.DB_ACCOUNT); // 因為不可被改寫，所以輸出：root
代碼塊123456789101112

這種方式將常量都放在一個對象下，通過Object.defineProperty定義屬性，設定其writable為false，就可以防止被改寫。

但有一個問題，CONFIG自身這個對象可能被修改。

換一個思路，既然在最外層聲明的變量是放在window上的，那可以用這個方式往 window上掛不可改寫的屬性。

Object.defineProperty(window, 'DB_ACCOUNT', {
  value: 'root',
  writable: false,
});

console.log(DB_ACCOUNT); // 輸出：root

DB_ACCOUNT = 'guest';

console.log(DB_ACCOUNT); // 因為不可被改寫，所以輸出：root
代碼塊12345678910

通常情況下 window 對象是不可被修改的，這樣常量的安全系數就變得非常高，但缺點是可能性較差，通過一點修改可以提升可讀性。

var define = function(name, value) {
  Object.defineProperty(window, name, {
    value: value,
    writable: false,
  });
};

define('DB_ACCOUNT', 'root');
define('DB_PASSWORD', 'root');
代碼塊123456789

只要約定好使用 define 函數定義的都為常量即可。

還有兩種方式，就是結合Object.seal與Object.freeze的特性來聲明常量。

前者可以使對象不能再被擴充，但是所有屬性還需要再手動設置不可寫，后者可以讓對象不能擴充，屬性也不能修改。

這里對這兩個原生方法不再做過多描述，有興趣可以查閱相關 API 資料。

6. 小結

變量就是存放值的容器。

變量名存在一些命名規則：

變量名必須使用字母、下劃線(_)、美元符號($)開頭；
變量對大小寫敏感；
無法使用關鍵字作為變量名。

同時起變量名的時候需要有意義，靠近上下文場景。

歡迎關注「慕課網」，發現更多IT圈優質內容，分享干貨知識，幫助你成為更好的程序員！

文已經原作者授權翻譯。

隨著 Web應用程序變得越來越大，CSS變得越來越大，越來越冗長，而且混亂不堪。在良好的上下文中使用CSS變量，可為我們提供重用和輕松更改重復出現的CSS屬性的機制。

在純CSS支持變量之前，我們有像Less和Sass這樣的預處理程序。但是它們需要在使用前進行編譯，因此(有時)增加了一層額外的復雜性。

如何定義和使用CSS變量（也稱為自定義屬性）

要聲明一個簡單的 JS 變量，很簡單，如下所示：

let myColor = "green";

要聲明一個CSS變量，必須在該變量的名字前添加兩個橫線。

body {
    --english-green-color: #1B4D3E;
}

現在，為了使用CSS變量的值，我們可以使用var(...)函數。

.my-green-component{
    background-color: var(--english-green-color);
}

管理CSS變量的最簡單方法是將它們聲明在:root偽類中。鑒于CSS變量與其他CSS定義一樣都遵循規則，因此將它們放在:root中將確保所有選擇器都可以訪問這些變量。

:root{
    --english-green-color: #1B4D3E;
}

覽器對CSS變量的支持情況

瀏覽器對CSS變量的支持一點也不差。如果查看 Can I Use CSS Variables 那會發現所有主流瀏覽器都支持CSS變量。無論是在移動設備還是 PC 上。

現在，讓我們看看這些CSS變量的實際作用。

示例1-管理顏色

使用CSS變量的最佳選擇之一就是設計的顏色。不必一遍又一遍地復制和粘貼相同的顏色，我們只需將它們放在變量中即可。

如果有該死的產品要我們更新特定的綠色陰影或將所有按鈕設置為紅色而不是藍色，則只需更改該CSS變量的值即可。我們無需搜索并替換所有出現的該顏色。

動手試試：https://codesandbox.io/s/8kkyl4mlm9?from-embed

示例2-刪除重復的代碼

通常我們需要構建一些組件的不同變體。相同的基本樣式，只是功能略有不同。我們舉例使用一個帶有不同顏色按鈕的案例。

.btn {
  border: 2px solid black;
  // more props here
}

.btn:hover {
  background: black;
  // more props here
}

.btn.red {
  border-color: red
}
.btn.red:hover {
  background: red
}

像這樣使用它們：

<button class="btn">Hello</button>
<button class="btn red">Hello</button>

但是，這會增加一些代碼重復。在.red類中，我們必須將邊框顏色和背景都設置為紅色。萬一哪天需要更改顏色，那就很麻煩了，需要一個一個的改。這個問題可以通過CSS變量輕松解決。

.btn {
    border: 2px solid var(--color, black);
}
.btn:hover {
    background: var(--color, black);
}
.btn.red {
    --color: red
}

動手試試：https://codesandbox.io/s/yp29qoyvyx?from-embed=&file=/base.css

示例3-使某些屬性易于閱讀

如果我們想為更復雜的屬性值創建快捷方式，那么CSS 變量非常有用，這樣我們就不必記住它了。

CSS屬性，如box-shadow、transform和font或其他具有多個參數的CSS規則就是很好的例子。

我們可以將屬性放在一個變量中，這樣我們就可以通過更易于閱讀的格式重用它。

// 主要代碼
:root {
  --tiny-shadow: 4px 4px 2px 0 rgba(0, 0, 0, 0.8);
  --animate-right: translateX(20px);
}
li {
  box-shadow: var(--tiny-shadow);
}
li:hover {
  transform: var(--animate-right);
}

動手試試：https://codesandbox.io/s/q3ww1znxn9?from-embed=&file=/css_vars.css:0-187

示例4-級聯變量

標準級聯規則也適用于CSS變量。如果一個自定義屬性被聲明多次，css文件中最下面的定義將覆蓋它上面的定義。

下面的示例演示了在用戶操作上動態操作屬性是多么容易，同時也保持代碼的清晰和簡潔。

// 主要代碼
.orange-container {
  --main-text: 18px;
}
.orange-container:hover {
  --main-text: 22px;
}
.red-container:hover {
  --main-text: 26px;
}
.title {
  font-size: var(--title-text);
}
.content {
  font-size: var(--main-text);
}

.container:hover {
  --main-text: 18px;
}

動手試試：https://codesandbox.io/s/xj0qxn2l7w?from-embed=&file=/index.html

示例5 -主題切換與CSS變量

CSS變量的一大優點是它們的響應特性。一旦我們更新它們，具有CSS變量值的任何屬性也會被更新。因此，僅需使用幾行Javascript并巧妙地使用CSS變量，便可以創建主題切換器機制。

動手試試：https://codesandbox.io/s/24j4m8y5kn?from-embed=&file=/scripts.js

擴展

就像CSS中幾乎所有東西一樣，變量也非常簡單易用。以下是一些未包含在示例中的技巧，但在某些情況下仍然非常有用：

注意大寫，CSS變量區分大小寫

:root {
 --color: blue;
 --COLOR: red;
}
/*--color and --COLOR are two different variables*/

當我們使用var()函數時，還可以傳入第二個參數。如果找不到自定義屬性，則將使用此值：

width: var(--custom-width, 33%);

可以將CSS變量直接用于HTML

<!--HTML-->
<html style="--size: 600px">

body {
  max-width: var(--size)
}

可以在其他CSS變量中使用CSS變量：

--base-red-color: #f00;
--background-gradient: linear-gradient(to top, var(--base-red-color), #222);

可以通過媒體查詢將CSS變量作為條件。例如，以下代碼根據屏幕大小更改 padding 的值：

:root {
    --padding: 15px 
}

@media screen and (min-width: 750px) {
    --padding: 30px
}

在calc()函數中也可以使用CSS變量。

--text-input-width: 5000px;
max-width: calc(var(--text-input-width) / 2);

CSS 變量不是靈丹妙藥。它們不會解決我們在CSS領域中遇到的所有問題。但是，它可以讓我們的代碼更具可讀性和可維護性。

而且，它們極大地提高了跨大型文檔進行更改的便利性。只需將所有常量設置在一個單獨的文件中，當我們只想對變量進行更改時，就不必跳過數千行代碼。

~完，我是小智，Spa去了，記得點個贊支持一下油。

作者：Danie 譯者：前端小智來源：stackabuse

原文：http://www.js-craft.io/blog/17-3-examples-of-using-css-variables/

在線咨詢

上一篇：6個私藏已久的音頻資源網站，質量高又免費，且用且珍惜
下一篇：「php」css與html的區別是什么？css與html區別對比

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript 變量

1. 聲明變量

2. 賦值

2.1 最簡單的賦值操作

2.2 將計算結果賦值給變量

2.3 讓變量也參與計算

2.4 改變變量的值

3. 變量的命名規范

3.1 變量名必須使用字母、下劃線(_)、美元符號($)開頭

3.2 變量對大小寫敏感

3.3 無法使用關鍵字作為變量名

4. 合理規范的變量名

5. 有關變量的其他知識

5.1 變量的默認值

5.2 同時聲明多個變量

5.3 變量在 window 上

5.4 不使用 var 關鍵字聲明的變量

5.5 連續賦值

5.6 重復聲明變量

5.7 提前使用變量

5.8 常量

6. 小結

如何定義和使用CSS變量（也稱為自定義屬性）

覽器對CSS變量的支持情況

示例1-管理顏色

示例2-刪除重復的代碼

示例3-使某些屬性易于閱讀

示例4-級聯變量

示例5 -主題切換與CSS變量

擴展

您的項目需求

3.1 變量名必須使用字母、下劃線(_)、美元符號($)開頭