JavaScript-operaattorit


Sisällysluettelo

    Näytä sisällysluettelo

Lisäysoperaattori + lisää numeroita:

Assignment Operator = määrittää muuttujalle arvon.


JavaScript-tehtävä

Assignment Operator (=) määrittää arvon muuttujalle:

Tehtäväesimerkkejä

let x = 10;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The = Operator</h2>

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

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

</body>
</html>
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z:
let z = x + y;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Operators</h1>
<h2>The Assignment (=) Operator</h2>

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

<script>
// Assign the value 5 to x
let x = 5;
// Assign the value 2 to y
let y = 2;
// Assign the value x + y to z
let z = x + y;
// Display z
document.getElementById("demo").innerHTML = "The sum of x + y is: " + z;
</script>

</body>
</html>

JavaScript lisäys

Lisäysoperaattori (+) lisää numeroita:

Lisätään

let x = 5;
let y = 2;
let z = x + y;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The + Operator</h2>

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

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

</body>
</html>

JavaScript kertolasku

Kertooperaattori (*) kertoo luvut:

Kerrotaan

let x = 5;
let y = 2;
let z = x * y;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The * Operator</h2>

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

<script>
let x = 5;
let y = 2;
let z = x * y;
document.getElementById("demo").innerHTML = z;
</script>

</body>
</html>

JavaScript-operaattoreiden tyypit

JavaScript-operaattoreita on erilaisia:

  • Aritmeettiset operaattorit

  • Tehtäväoperaattorit

  • Vertailuoperaattorit

  • Merkkijonooperaattorit

  • Loogiset operaattorit

  • Bittikohtaiset operaattorit

  • Kolminkertaiset operaattorit

  • Tyyppi Operaattorit


JavaScript-aritmeettiset operaattorit

Aritmeettisia operaattoreita käytetään suorittamaan aritmeettisia lukuja:

Aritmeettiset operaattorit Esimerkki

let a = 3;
let x = (100 + 50) * a;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>Arithmetic Operations</h2>
<p>A typical arithmetic operation takes two numbers (or expressions) and produces a new number.</p>

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

<script>
let a = 3;
let x = (100 + 50) * a;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>
+

Lisäys

-

Vähennyslasku

*

Kertominen

**

Eksponentti (ES2016)

/

Division

%

Modulus (Divisioonan jäännös)

++

Lisäys

--

Vähennys

Huomautus

Aritmeettiset operaattorit on kuvattu täydellisesti kohdassa JS Aritmetiikka.



JavaScript-tehtäväoperaattorit

Osoitusoperaattorit antavat arvoja JavaScript-muuttujille.

Lisäyksen määritysoperaattori (+=) lisää arvon muuttujaan.

Tehtävä

let x = 10;
x += 5;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Arithmetic</h1>
<h2>The += Operator</h2>

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

<script>
var x = 10;
x += 5;
document.getElementById("demo").innerHTML = x;
</script>

</body>
</html>
Operator Example Same As
= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y
**= x **= y x = x ** y

Huomautus

Tehtäväoperaattorit on kuvattu täydellisesti kohdassa JS-tehtävä.


JavaScript-vertailuoperaattorit

==

yhtä kuin

===

samanarvoinen ja samanlainen tyyppi

!=

ei tasa-arvoinen

!==

ei ole samanarvoinen tai ei samanlainen tyyppi

>

suurempi kuin

<

vähemmän kuin

>=

suurempi tai yhtä suuri kuin

<=

Pienempi kuin tai yhtä suuri kuin

?

kolmiosainen operaattori

Huomautus

Vertailuoperaattorit on kuvattu täydellisesti kohdassa JS-vertailut.


JavaScript-merkkijonojen vertailu

Kaikkia yllä olevia vertailuoperaattoreita voidaan käyttää myös merkkijonoissa:

Esimerkki

let text1 = "A";
let text2 = "B";
let result = text1 < text2;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Operators</h1>

<p>All conditional operators can be used on both numbers and strings.</p>

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

<script>
let text1 = "A";
let text2 = "B";
let result = text1 < text2;
document.getElementById("demo").innerHTML = "Is A less than B? " + result;
</script>

</body>
</html>

Huomaa, että merkkijonoja verrataan aakkosjärjestyksessä:

Esimerkki

let text1 = "20";
let text2 = "5";
let result = text1 < text2;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript String Operators</h1>
<p>Note that strings are compared alphabetically:</p>

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

<script>
let text1 = "20";
let text2 = "5";
let result = text1 < text2;
document.getElementById("demo").innerHTML = "Is 20 less than 5? " + result;
</script>

</body>
</html>

JavaScript-merkkijonon lisäys

+-merkkiä voidaan käyttää myös merkkijonojen lisäämiseen (ketjuttamiseen):

Esimerkki

let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Operators</h1>
<h2>The + Operator</h2>
<p>The + operator concatenates (adds) strings.</p>

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

<script>
let text1 = "John";
let text2 = "Doe";
let text3 = text1 + " " + text2;
document.getElementById("demo").innerHTML = text3;
</script>

</body>
</html>

Osoitusoperaattoria += voidaan käyttää myös merkkijonojen lisäämiseen (ketjuttamiseen):

Esimerkki

let text1 = "What a very ";
text1 += "nice day";

Teksti1:n tulos on:

What a very nice day

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Operators</h1>
<h2>The += Operator</h2>
<p>The assignment operator += can concatenate strings.</p>

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

<script>
let text1 = "What a very ";
text1 += "nice day";
document.getElementById("demo").innerHTML = text1;
</script>

</body>
</html>

Huomautus

Kun sitä käytetään merkkijonoissa, +-operaattoria kutsutaan ketjutusoperaattoriksi.


Merkkien ja numeroiden lisääminen

Kahden luvun lisääminen palauttaa summan, mutta luvun ja merkkijonon lisääminen palauttaa merkkijonon:

Esimerkki

let x = 5 + 5;
let y = "5" + 5;
let z = "Hello" + 5;

x, y ja z tulos on:

10
55
Hello5

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript String Operators</h1>
<h2>The + Operator</h2>
<p>Adding a number and a string, returns a string.</p>

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

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

</body>
</html>

Huomautus

Jos lisäät numeron ja merkkijonon, tuloksena on merkkijono!


JavaScriptin loogiset operaattorit

&&

loogista ja

||

looginen tai

!

loogista ei

Huomautus

Loogiset operaattorit on kuvattu täydellisesti kohdassa JS-vertailut.


JavaScript-tyyppiset operaattorit

typeof

Palauttaa muuttujan tyypin

instanceof

Palauttaa tosi, jos objekti on objektityypin esiintymä

Huomautus

Tyyppioperaattorit on kuvattu täydellisesti luvussa JS-tyypin muuntaminen.


Bittikohtaiset JavaScript-operaattorit

Bittioperaattorit työskentelevät 32-bittisillä numeroilla.

Mikä tahansa operaation numeerinen operandi muunnetaan 32-bittisiksi luvuiksi. Tulos muunnetaan takaisin JavaScript-numeroksi.

Operator Description Example Same as Result Decimal
& AND 5 & 1 0101 & 0001 0001  1
| OR 5 | 1 0101 | 0001 0101  5
~ NOT ~ 5  ~0101 1010  10
^ XOR 5 ^ 1 0101 ^ 0001 0100  4
<< left shift 5 << 1 0101 << 1 1010  10
>> right shift 5 >> 1 0101 >> 1 0010   2
>>> unsigned right shift 5 >>> 1 0101 >>> 1 0010   2

Yllä olevissa esimerkeissä käytetään 4-bittisiä etumerkittömiä esimerkkejä. Mutta JavaScript käyttää 32-bittisiä etumerkillisiä numeroita.
Tämän vuoksi JavaScriptissä ~ 5 ei palauta 10:tä. Se palauttaa -6.
~000000000000000000000000000000101 palaa 111111111111111111111111111111010

Bittioperaattorit on kuvattu täydellisesti JS:ssä Bittikohtainen luku.