JavaScript - 變數

JavaScript 變數

JavaScript 變數用於儲存稍後可以更改的資料。可以將這些變數視為命名容器。您可以將資料放入這些容器中，然後只需命名容器即可引用資料。

在 JavaScript 程式中使用變數之前，必須先宣告它。在 JavaScript 中，您可以透過 4 種方式宣告變數：

不使用任何關鍵字。
使用 'var' 關鍵字。
使用 'let' 關鍵字。
使用 'const' 關鍵字。

let 和 const 關鍵字是在 2015 年（ES6）引入 JavaScript 的。在 ES6 之前，只有 var 關鍵字用於在 JavaScript 中宣告變數。在本節中，我們將討論 'var' 關鍵字。我們將在後續章節中介紹 'let' 和 'const' 關鍵字。

JavaScript 中的變數宣告

您可以按照以下語法在不使用任何關鍵字的情況下宣告變數。

<script>
   Money = 10;
   Name = "tutorialspoint";
</script>

此外，您可以使用 var 關鍵字宣告變數，如下所示。

<script>
   var money;
   var name;
</script>

您還可以使用相同的 var 關鍵字宣告多個變數，如下所示：

<script>
   var money, name;
</script>

使用賦值運算子初始化變數

將值儲存在變數中稱為變數初始化。您可以在建立變數時或在以後需要該變數時進行變數初始化。

例如，您可以建立一個名為 money 的變數，並在稍後為其賦值 2000.50。對於另一個變數，您可以在初始化時賦值，如下所示。

<script>
   var name = "Ali";
   var money;
   money = 2000.50;
</script>

注意 - 僅在宣告或初始化時使用 var 關鍵字，在文件中任何變數名稱的生命週期中只使用一次。您不應該重新宣告同一個變數兩次。

JavaScript 是一種無型別語言。這意味著 JavaScript 變數可以儲存任何資料型別的值。與許多其他語言不同，您不必在變數宣告期間告訴 JavaScript 變數將儲存哪種型別的值。變數的值型別可以在程式執行期間更改，JavaScript 會自動處理它。

JavaScript 資料型別

在 JavaScript 中，變數可以儲存動態資料型別的值。例如，您可以在 JavaScript 變數中儲存數字、字串、布林值、物件等資料型別的值。

<script>
   var num = 765; // Number
   var str = "Welcome"; // String
   var bool = false; // Boolean
</script>

您將在 JavaScript 資料型別章節中詳細瞭解資料型別。

JavaScript 變數名（識別符號）

在 JavaScript 中，一個唯一的字元序列用於命名變數，稱為識別符號。

以下是 JavaScript 中識別符號命名的一些規則：

有效字元 - 在 JavaScript 中，變數名可以包含數字、字母字元和特殊字元，如下劃線 (_) 和美元符號 ($)。JavaScript 變數名不能以數字 (0-9) 開頭。它們必須以字母或下劃線字元開頭。例如，123test 是無效的變數名，但 _123test 是有效的變數名。
區分大小寫 - 變數名區分大小寫。這意味著 Name 和 name 是不同的識別符號。
Unicode 支援 - 識別符號還可以包含 Unicode。因此，開發人員可以使用任何語言定義變數。
保留關鍵字 - 您不應使用任何 JavaScript 保留關鍵字作為變數名。例如，break 或 boolean 變數名無效。在這裡，我們提供了 JavaScript 保留關鍵字的完整列表。

JavaScript 美元符號 ($) 和下劃線 (_)

您可以在 JavaScript 中使用 $ 和 _ 定義變數，因為 JavaScript 引擎認為它是有效的字元。

示例（演示識別符號）

在此示例中，我們使用 var 關鍵字定義了變數。第一個變數名以下劃線開頭，第二個變數名以美元符號開頭。程式設計師可以取消第三個變數宣告的註釋，以檢查當我們使用數字開頭任何識別符號時 JavaScript 生成的錯誤。

<html>
<head>
    <title> Variables in JavaScript </title>
</head>
<body>
   <script>
        var _abc = "Hi!";
        var $abc = "Hello!";
        //  var 9abc = "Bye!";  // This is invalid
        document.write("_abc " + _abc + "<br>");
        document.write("$abc = " + $abc + "<br>");
    </script>
</body>
</html>

它產生以下結果：

_abc Hi!
$abc = Hello!

JavaScript 中的未定義變數值

當你在宣告變數後沒有初始化它時，它包含未定義的值。但是，你也可以將未定義的值賦給變數。

讓我們看看下面的例子。

示例

<html>
<body>
   <script>
      var num;
      document.write("The value of num is: " + num + "<br/>");
   </script>
</body>
</html>

這產生以下結果：

The value of num is: undefined

JavaScript 變數作用域

變數的作用域是定義它的程式區域。JavaScript 變數只有兩個作用域。

全域性變數 - 全域性變數具有全域性作用域，這意味著它可以在你的 JavaScript 程式碼中的任何地方定義。
區域性變數 - 區域性變數僅在其定義的函式內可見。函式引數始終是該函式的區域性變數。

在函式體內部，區域性變數優先於具有相同名稱的全域性變數。如果你聲明瞭一個與全域性變數同名的區域性變數或函式引數，你實際上隱藏了全域性變數。請檢視下面的示例。

示例

在下面的示例中，我們在函式外部定義了一個名為 myVar 的變數並將其初始化為“global”值。此外，我們在 checkscope() 函式內部使用相同的識別符號定義了變數並將其初始化為“local”值。

我們在函式內部列印 myVar 變數的值。因此，區域性變數優先於全域性變數，並在輸出中列印“local”。

<html>
<head>
   <title> JavaScript Variable Scope Example</title>
</head>
<body onload = checkscope();>   
   <script>
	  var myVar = "global";      // Declare a global variable
	  function checkscope( ) {
		 var myVar = "local";    // Declare a local variable
		 document.write(myVar);
	  }
   </script>     
</body>
</html>

這產生以下結果：

local

示例

在下面的示例中，我們定義了變數而沒有使用var關鍵字。name變數包含字串型別的值，number變數包含浮點資料型別的值。

當我們定義變數而不使用任何關鍵字時，JavaScript 將它們視為全域性變數，並且可以在程式碼中的任何地方使用它們。

<html>
<head>
   <title> Variables without var keyword </title>
</head>
<body>
   <script>
      name = "tutorialspoint"; // String type variable
      number = 10.25; // Number type variable
      document.write("name = " + name + ", number = " + number + "<br>");
   </script>
</body>
</html>

這產生以下結果：

name = tutorialspoint, number = 10.25

此外，如果我們使用var關鍵字並帶有值宣告變數，然後重新宣告相同的識別符號而不進行初始化，則識別符號不會丟失先前值。讓我們透過下面的示例來理解它。

示例

在下面的示例中，我們聲明瞭age變數並將其初始化為10。再次，我們聲明瞭age變數但沒有初始化它。它仍然在輸出中列印10，因為它沒有丟失先前初始化的值。但是，如果我們更新age變數的值，它會成功更新它。

<html>
<head>
   <title> Variables with var keyword </title>
</head>
<body>
   <script>
      var age = 10;
      var age;
      document.write("age = " + age + "<br>");
   </script>
</body>
</html>

這產生以下結果：

age = 10

列印頁面