JavaScript-variabler kan deklareras på fyra sätt:
Automatiskt
Använder var
Använder let
Använder const
I det här första exemplet, x
, y
och z
är odeklarerade variabler.
De deklareras automatiskt när de används första gången:
x = 5;
y = 6;
z = x + y;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are undeclared.</p>
<p>They are automatically declared when first used.</p>
<p id="demo"></p>
<script>
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Det anses vara god programmeringssed att alltid deklarera variabler före användning.
Från exemplen kan du gissa:
x lagrar värdet 5
y lagrar värdet 6
z lagrar värdet 11
var x = 5;
var y = 6;
var z = x + y;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
var x = 5;
var y = 6;
var z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
Nyckelordet var
användes i all JavaScript-kod från 1995 till 2015.
Nyckelorden let
och const
lades till i JavaScript 2015.
Nyckelordet var
bör endast användas i kod skriven för äldre webbläsare.
let x = 5;
let y = 6;
let z = x + y;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
let x = 5;
let y = 6;
let z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const x = 5;
const y = 6;
const z = x + y;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, x, y, and z are variables.</p>
<p id="demo"></p>
<script>
const x = 5;
const y = 6;
const z = x + y;
document.getElementById("demo").innerHTML =
"The value of z is: " + z;
</script>
</body>
</html>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>In this example, price1, price2, and total are variables.</p>
<p id="demo"></p>
<script>
const price1 = 5;
const price2 = 6;
let total = price1 + price2;
document.getElementById("demo").innerHTML =
"The total is: " + total;
</script>
</body>
</html>
De två variablerna price1
och price2
deklareras med nyckelordet const
.
Dessa är konstanta värden och kan inte ändras.
Variabeln total
deklareras med nyckelordet let
.
Värdet totalt
kan ändras.
1. Deklarera alltid variabler
2. Använd alltid const
om värdet inte ska ändras
3. Använd alltid const
om typen inte ska ändras (matriser och objekt)
4. Använd bara let
om du inte kan använda const
5. Använd endast var
om du MÅSTE stödja gamla webbläsare.
Precis som i algebra har variabler värden:
let x = 5;
let y = 6;
Precis som i algebra används variabler i uttryck:
let z = x + y;
Från exemplet ovan kan du gissa att summan beräknas till 11.
Variabler är behållare för lagring av värden.
Alla JavaScript-variabler måste vara identifierad med unika namn.
Dessa unika namn kallas identifierare.
Identifierare kan vara korta namn (som x och y) eller mer beskrivande namn (ålder, summa, totalvolym).
De allmänna reglerna för att konstruera namn för variabler (unika identifierare) är:
Namn kan innehålla bokstäver, siffror, understreck och dollartecken.
Namn måste börja med en bokstav.
Namn kan också börja med $och _ (men vi kommer inte att använda det i denna handledning).
Namn är skiftlägeskänsliga (y och Y är olika variabler).
Reserverade ord (som JavaScript-nyckelord) kan inte användas som namn.
JavaScript-identifierare är skiftlägeskänsliga.
I JavaScript är likhetstecknet (=
) en "tilldelning"-operator, inte en "lika med" operatör.
Detta skiljer sig från algebra. Följande är inte meningsfullt i algebra:
x = x + 5
I JavaScript är det dock helt vettigt: det tilldelar värdet x + 5 till x.
(Den beräknar värdet på x + 5 och sätter resultatet i x. Värdet på x ökas med 5.)
Operatorn "lika med" skrivs som ==
i JavaScript.
JavaScript-variabler kan innehålla siffror som 100 och textvärden som "John Hind".
I programmering kallas textvärden för textsträngar.
JavaScript kan hantera många typer av data, men för nu, tänk bara på siffror och strängar.
Strängar skrivs inom dubbla eller enkla citattecken. Siffror skrivs utan citat.
Om du sätter ett nummer inom citattecken kommer det att behandlas som en textsträng.
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Strings are written with quotes.</p>
<p>Numbers are written without quotes.</p>
<p id="demo"></p>
<script>
const pi = 3.14;
let person = "John Doe";
let answer = 'Yes I am!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>
Att skapa en variabel i JavaScript kallas att "deklarera" en variabel.
Du deklarerar en JavaScript-variabel med var
eller nyckelordet let
:
var carName;
let carName;
Efter deklarationen har variabeln inget värde (tekniskt sett är den odefinierad
).
För att tilldela ett värde till variabeln, använd likhetstecknet:
carName = "Volvo";
Du kan också tilldela variabeln ett värde när du deklarerar den:
let carName = "Volvo";
I exemplet nedan skapar vi en variabel som heter carName
och tilldelar värdet "Volvo" till det.
Sedan "matar" vi värdet i ett HTML-stycke med id="demo":
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>Create a variable, assign a value to it, and display it:</p>
<p id="demo"></p>
<script>
let carName = "Volvo";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Det är en bra programmeringspraxis att deklarera alla variabler i början av ett skript.
Du kan deklarera många variabler i ett påstående.
Börja uttalandet med let
och separera variablerna med komma:
let person = "John Doe", carName = "Volvo", price = 200;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe", carName = "Volvo", price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
En deklaration kan sträcka sig över flera rader:
let person = "John Doe",
carName = "Volvo",
price = 200;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>You can declare many variables in one statement.</p>
<p id="demo"></p>
<script>
let person = "John Doe",
carName = "Volvo",
price = 200;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
I datorprogram deklareras variabler ofta utan värde. Värdet kan vara något som måste beräknas, eller något som kommer att tillhandahållas senare, som användarinmatning.
En variabel som deklareras utan ett värde kommer att ha värdet odefinierad
.
Variabeln carName kommer att ha värdet undefined
efter exekvering av denna sats:
let carName;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>A variable without a value has the value of:</p>
<p id="demo"></p>
<script>
let carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Om du omdeklarerar en JavaScript-variabel som deklarerats med var
, kommer den inte att förlora sitt värde.
Variabeln carName
kommer fortfarande att ha värdet "Volvo" efter exekveringen av dessa satser:
var carName = "Volvo";
var carName;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>If you re-declare a JavaScript variable, it will not lose its value.</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
var carName;
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>
Du kan inte omdeklarera en variabel deklarerad med let
eller const
.
Detta kommer inte att fungera:
let carName = "Volvo";
let carName;
Som med algebra kan du göra aritmetik med JavaScript-variabler med hjälp av operatorer som =
och +
:
let x = 5 + 2 + 3;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 5 + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = 5 + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Du kan också lägga till strängar, men strängar kommer att sammanfogas:
let x = "John" + " " + "Doe";
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "John" + " " + "Doe" is:</p>
<p id="demo"></p>
<script>
let x = "John" + " " + "Doe";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Prova även detta:
let x = "5" + 2 + 3;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding "5" + 2 + 3 is:</p>
<p id="demo"></p>
<script>
let x = "5" + 2 + 3;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Om du sätter ett nummer inom citattecken kommer resten av siffrorna att behandlas som strängar och sammanfogas.
Prova nu detta:
let x = 2 + 3 + "5";
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The result of adding 2 + 3 + "5" is:</p>
<p id="demo"></p>
<script>
let x = 2 + 3 + "5";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>
Eftersom JavaScript behandlar ett dollartecken som en bokstav, är identifierare som innehåller $giltiga variabelnamn:
let $ = "Hello World";
let $$$ = 2;
let $myMoney = 5;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The dollar sign is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let $$$ = 2;
let $myMoney = 5;
document.getElementById("demo").innerHTML = $$$ + $myMoney;
</script>
</body>
</html>
Att använda dollartecknet är inte särskilt vanligt i JavaScript, men professionella programmerare använder det ofta som ett alias för huvudfunktionen i ett JavaScript-bibliotek.
I JavaScript-biblioteket jQuery, till exempel, är huvudfunktionen $
används för att välja HTML-element. I jQuery betyder $ ("p");
"välj alla p-element".
Eftersom JavaScript behandlar understreck som en bokstav, är identifierare som innehåller _ giltiga variabelnamn:
let _lastName = "Johnson";
let _x = 2;
let _100 = 5;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Variables</h1>
<p>The underscore is treated as a letter in JavaScript names.</p>
<p id="demo"></p>
<script>
let _x = 2;
let _100 = 5;
document.getElementById("demo").innerHTML = _x + _100;
</script>
</body>
</html>
Att använda understreck är inte särskilt vanligt i JavaScript, men en konvention bland professionella programmerare är att använda den som ett alias för "privata (dolda)" variabler.