Gamla JS-versioner namnges med nummer: ES5 (2009) och ES6 (2015).
Från 2016 är versionerna namngivna efter år: ECMAScript 2016, 2017, 2018, 2019, ...
BigInt
String matchAll()
The Nullish Coalescing Operator (??)
Den valfria kedjeoperatören (?.)
Logical AND Assignment Operator (&&=)
Logisk ELLER tilldelning (||=)
Nullish Coalescing Assignment (??=)
Promise allSettled():style="word-wrap: break-word;">Promise.allSettled([bal1,bal2,bal3]).sedan {}
Dynamisk import
Dessa funktioner är relativt nya.
Äldre webbläsare kan behöva en alternativ kod (Polyfill)
JavaScript BigInt
-variabler används för att lagra stora heltalsvärden som är för stora för att representeras av ett normalt JavaScript nummer
.
JavaScript-heltal är endast korrekta upp till cirka 15 siffror.
let x = 999999999999999;
let y = 9999999999999999; // too big
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Integer Precision</h2>
<p>Integers (numbers without a period or exponent notation) are accurate up to 15 digits:</p>
<p id="demo"></p>
<script>
let x = 999999999999999;
let y = 9999999999999999;
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
let x = 9999999999999999;
let y = 9999999999999999n;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Integer and BigInt</h2>
<p id="demo"></p>
<script>
let x = 9999999999999999;
let y = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
För att skapa en BigInt
, lägg till n i slutet av ett heltal eller anrop BigInt()
:
let x = 1234567890123456789012345n;
let y = BigInt(1234567890123456789012345)
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>Create a BigInt</h2>
<p id="demo"></p>
<script>
let x = 123456789012345678901234567890n;
let y = BigInt("123456789012345678901234567890");
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
JavaScript-typen typ
en BigInt
är "bigint":
let x = BigInt(999999999999999);
let type = typeof x;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Numbers</h1>
<h2>BigInt typeof</h2>
<p>The typeof a BigInt is:</p>
<p id="demo"></p>
<script>
let x = BigInt("9999999999999999");
document.getElementById("demo").innerHTML = typeof x;
</script>
</body>
</html>
BigInt
stöds i alla moderna webbläsare sedan september 2020:
Chrome 67 | Edge 79 | Firefox 68 | Safari 14 | Opera 54 |
May 2018 | Jan 2020 | Jul 2019 | Sep 2020 | Jun 2018 |
Före ES2020 fanns det ingen strängmetod som kunde användas för att söka efter alla förekomster av ett snöre i ett snöre.
const iterator = text.matchAll("Cats");
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll("Cats");
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
Om parametern är ett reguljärt uttryck måste den globala flaggan (g) sättas in, annars ett TypeError visas.
const iterator = text.matchAll(/Cats/g);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/g);
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
Om du vill söka skiftlägesokänslig måste den okänsliga flaggan (i) ställas in:
const iterator = text.matchAll(/Cats/gi);
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>
<h2>The matchAll() Method</h2>
<p>ES2020 intoduced the string method matchAll().</p>
<p id="demo"></p>
<script>
let text = "I love cats. Cats are very easy to love. Cats are very popular."
const iterator = text.matchAll(/Cats/gi);
document.getElementById("demo").innerHTML = Array.from(iterator);
</script>
</body>
</html>
ES2021 introducerade strängmetoden replaceAll().
Operatorn ??
returnerar det första argumentet om det inte är nullish (null
eller odefinierad
).
Annars returnerar den den andra.
let name = null;
let text = "missing";
let result = name ?? text;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ?? Operator</h2>
<p>The ?? operator returns the first argument if it is not nullish (null or undefined). Otherwise it returns the second.</p>
<p id="demo"></p>
<script>
let name = null;
let text = "missing";
let result = name ?? text;
document.getElementById("demo").innerHTML = "The name is " + result;
</script>
</body>
</html>
Nullish-operatören stöds i alla moderna webbläsare sedan mars 2020:
Chrome 80 | Edge 80 | Firefox 72 | Safari 13.1 | Opera 67 |
Feb 2020 | Feb 2020 | Jan 2020 | Mar 2020 | Mar 2020 |
Den valfria kedjeoperatören returnerar odefinierad
om ett objekt är odefinierad
eller null
(istället för att skapa ett fel).
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Operators</h1>
<h2>The ?. Operator</h2>
<p>The ?. operator returns undefined if an object is undefined or null (instead of throwing an error).</p>
<p>Car name is:</p>
<p id="demo"></p>
<script>
const car = {type:"Fiat", model:"500", color:"white"};
let name = car?.name;
document.getElementById("demo").innerHTML = name;
</script>
</body>
</html>
Operatören ?.=
stöds i alla moderna webbläsare sedan mars 2020:
Chrome 80 | Edge 80 | Firefox 74 | Safari 13.1 | Opera 67 |
Feb 2020 | Feb 2020 | Mar 2020 | Mar 2020 | Mar 2020 |
Logical AND Assignment Operator används mellan två värden.
Om det första värdet är true
, tilldelas det andra värdet.
let x = 10;
x &&= 5;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Logical AND Assignment</h2>
<h3>The &&= Operator</h3>
<p>If the first value is true, the second value is assigned.</p>
<p id="demo"></p>
<script>
let x = 100;
x &&= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
Operatören &&=
stöds i alla moderna webbläsare sedan september 2020:
Chrome 85 | Edge 85 | Firefox 79 | Safari 14 | Opera 71 |
Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |
Logical OR Assignment Operator används mellan två värden.
Om det första värdet är false
, tilldelas det andra värdet.
let x = 10;
x ||= 5;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>Logical OR Assignment</h2>
<h3>The ||= Operator</h3>
<p>If the first value is false, the second value is assigned:</p>
<p id="demo"></p>
<script>
let x = undefined;
x ||= 5;
document.getElementById("demo").innerHTML = "Value of x is: " + x;
</script>
</body>
</html>
Operatören ||=
stöds i alla moderna webbläsare sedan september 2020:
Chrome 85 | Edge 85 | Firefox 79 | Safari 14 | Opera 71 |
Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |
Nullish Coalescing Assignment Operator används mellan två värden.
Om det första värdet är odefinierat
eller null
, tilldelas det andra värdet.
let x;
x ??= 5;
Prova själv →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Assignments</h1>
<h2>The ??= Operator</h2>
<p>The ??= operator is used between two values. If the first value is undefined or null, the second value is assigned.</p>
<p id="demo"></p>
<script>
let x;
document.getElementById("demo").innerHTML = x ??= 5;
</script>
</body>
</html>
Operatören ??=
stöds i alla moderna webbläsare sedan september 2020:
Chrome 85 | Edge 85 | Firefox 79 | Safari 14 | Opera 71 |
Aug 2020 | Aug 2020 | Mar 2020 | Sep 2020 | Sep 2020 |