JavaScript-datatyper


Innehållsförteckning

    Visa innehållsförteckning

JavaScript har 8 datatyper

1. Sträng
2. Nummer
3. Bigint
4. Boolean
5. Odefinierat
6. Null
7. Symbol
8. Objekt

Objektdatatypen

Objektdatatypen kan innehålla:

1. Ett objekt
2. En array
3. En dejt

Exempel

// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25"); 

Notera

En JavaScript-variabel kan innehålla vilken typ av data som helst.

Begreppet datatyper

Inom programmering är datatyper ett viktigt begrepp.

För att kunna operera på variabler är det viktigt att veta något om typen.

Utan datatyper kan en dator inte lösa detta på ett säkert sätt:

let x = 16 + "Volvo";

Är det någon mening med att lägga till "Volvo" till sexton? Kommer det att producera en fel eller kommer det att ge ett resultat?

JavaScript kommer att behandla exemplet ovan som:

let x = "16" + "Volvo";

Notera

När du lägger till ett nummer och en sträng kommer JavaScript att behandla numret som ett sträng.

Exempel

let x = 16 + "Volvo";

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a number and a string, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = 16 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


Exempel

let x = "Volvo" + 16;

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>When adding a string and a number, JavaScript will treat the number as a string.</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


JavaScript utvärderar uttryck från vänster till höger. Olika sekvenser kan ger olika resultat:

JavaScript:

let x = 16 + 4 + "Volvo";

Resultat :

20Volvo

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = 16 + 4 + "Volvo";
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


JavaScript:

let x = "Volvo" + 16 + 4;

Resultat :

Volvo164

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>JavaScript evaluates expressions from left to right. Different sequences can produce different results:</p>

<p id="demo"></p>

<script>
let x = "Volvo" + 16 + 4;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>


I det första exemplet behandlar JavaScript 16 och 4 som siffror, tills det når "Volvo".

I det andra exemplet, eftersom den första operanden är en sträng, är alla operander det behandlas som strängar.



JavaScript-typer är dynamiska

JavaScript har dynamiska typer. Det betyder att samma variabel kan användas att hålla olika datatyper:

Exempel

let x;       // Now x is undefined
x = 5;       // Now x is a Number
x = "John";  // Now x is a String

JavaScript-strängar

En sträng (eller en textsträng) är en serie tecken som "John Doe".

Strängar skrivs med citattecken. Du kan använda enkla eller dubbla citattecken:

Exempel

// Using double quotes:
let carName1 = "Volvo XC60";

// Using single quotes:
let carName2 = 'Volvo XC60';

Du kan använda citattecken i en sträng, så länge de inte matchar citattecken runt strängen:

Exempel

// Single quote inside double quotes:
let answer1 = "It's alright";
 

// Single quotes inside double quotes:
let answer2 = "He is called 'Johnny'";

// Double quotes inside single quotes:
let answer3 = 'He is called "Johnny"';

Du kommer att lära dig mer om strängar senare i den här självstudien.


JavaScript-nummer

Alla JavaScript-nummer lagras som decimaltal (flytande komma).

Tal kan skrivas med eller utan decimaler:

Exempel

// With decimals:
let x1 = 34.00;

 
// Without decimals:
let x2 = 34; 

Exponentiell notation

Extra stora eller extra små tal kan skrivas med scientific (exponentiell) notation:

Exempel

let y = 123e5;    // 12300000
let z = 123e-5;   // 0.00123

Notera

De flesta programmeringsspråk har många nummertyper:

Heltal (heltal):
byte (8-bitars), kort (16-bitars), int (32-bitars), lång (64-bitars)

Reella tal (flytande komma):
flytande (32-bitars), dubbel (64-bitars).

Javascript-nummer är alltid en typ:
dubbel (64-bitars flyttal).

Du kommer att lära dig mer om nummer senare i den här självstudien.


JavaScript BigInt

Alla JavaScript-nummer lagras i ett 64-bitars flyttalsformat.

JavaScript BigInt är en ny datatyp (ES2020) som kan användas för att lagra heltalsvärden som är för stora för att representeras med ett normalt JavaScript-nummer.

Exempel

let x = BigInt("123456789012345678901234567890");

Du kommer att lära dig mer om BigInt senare i den här självstudien.


JavaScript Booleans

Boolean kan bara ha två värden: true eller false.

Exempel

let x = 5;
let y = 5;
let z = 6;
(x == y)       
  // Returns true
(x == z)       // Returns 
  false

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Booleans</h2>

<p>Booleans can have two values: true or false:</p>

<p id="demo"></p>

<script>
let x = 5;
let y = 5;
let z = 6;

document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>

</body>
</html>

Booleans används ofta i villkorlig testning.

Du kommer att lära dig mer om booleans senare i den här handledningen.


JavaScript-matriser

JavaScript-matriser är skrivna med hakparenteser.

Matrisobjekt separeras med kommatecken.

Följande kod deklarerar (skapar) en array som heter bilar, som innehåller tre föremål (bilnamn):

Exempel

const cars = ["Saab", "Volvo", "BMW"];

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Arrays</h2>

<p>Array indexes are zero-based, which means the first item is [0].</p>

<p id="demo"></p>

<script>
const cars = ["Saab","Volvo","BMW"];

document.getElementById("demo").innerHTML = cars[0];
</script>

</body>
</html>

Arrayindex är nollbaserade, vilket betyder att det första objektet är [0], det andra är [1] och så vidare.

Du kommer att lära dig mer om matriser senare i den här självstudien.


JavaScript-objekt

JavaScript-objekt skrivs med klammerparenteser {}.

Objekt egenskaper skrivs som namn:värde-par, separerade med kommatecken.

Exempel

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Objects</h2>

<p id="demo"></p>

<script>
const person = {
  firstName : "John",
  lastName  : "Doe",
  age     : 50,
  eyeColor  : "blue"
};

document.getElementById("demo").innerHTML =
person.firstName + " is " + person.age + " years old.";
</script>

</body>
</html>

Objektet (personen) i exemplet ovan har fyra egenskaper: förnamn, efternamn, ålder och ögonfärg.

Du kommer att lära dig mer om objekt senare i den här handledningen.


Typen av operatör

Du kan använda JavaScript-operatorn typeof för att hitta typen av en JavaScript-variabel.

Operatorn typeof returnerar typen av en variabel eller ett uttryck:

Exempel

typeof ""             // Returns 
 "string"
typeof "John"         // Returns 
 "string"
typeof "John Doe"     // Returns 
 "string"

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof "" + "<br>" +
typeof "John" + "<br>" + 
typeof "John Doe";
</script>
</body>
</html>


Exempel

typeof 0              // Returns 
 "number"
  typeof 314            // Returns 
 "number"
  typeof 3.14           // Returns 
 "number"
  typeof (3)            // Returns 
 "number"
typeof (3 + 4)        // Returns 
 "number"

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The typeof operator returns the type of a variable or an expression.</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 
typeof 0 + "<br>" + 
typeof 314 + "<br>" +
typeof 3.14 + "<br>" +
typeof (3) + "<br>" +
typeof (3 + 4);
</script>

</body>
</html>


Du kommer att lära dig mer om typ av senare i den här självstudien.


Odefinierad

I JavaScript har en variabel utan värde värdet undefined. Typen är också odefinierad.

Exempel

let car;    // Value is undefined, 
    type is undefined

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>The value (and the data type) of a variable with no value is <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>

</body>
</html> 

Vilken variabel som helst kan tömmas genom att sätta värdet på odefinierad. Typen kommer också att vara odefinierad.

Exempel

   car = undefined;    // Value is undefined, 
    type is undefined

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The typeof Operator</h2>
<p>Variables can be emptied if you set the value to <b>undefined</b>.</p>

<p id="demo"></p>

<script>
let car = "Volvo";
car = undefined;

document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>

</body>
</html> 

Tomma värden

Ett tomt värde har ingenting att göra med odefinierad.

En tom sträng har både ett juridiskt värde och en typ.

Exempel

let car = "";    // The value is  "", the typeof is "string"

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript</h2>

<p>An empty string has both a legal value and a type:</p>

<p id="demo"></p>

<script>
let car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>

</body>
</html>