JavaScript ES2019


Innehållsförteckning

    Visa innehållsförteckning

JavaScript-versionsnummer

Gamla JS-versioner namnges med nummer: ES5 (2009) och ES6 (2015).

Från 2016 är versionerna namngivna efter år: ECMAScript 2016, 2017, 2018, 2019, ...

Nya funktioner i ES2019

  • String.trimStart()

  • String.trimEnd()

  • Object.fromEntries

  • Valfri spärrbindning

  • Array.flat()

  • Array.flatMap()

  • Reviderad Array.Sort()

  • Reviderad JSON.stringify()

  • Separatorsymboler tillåtna i strängbokstavar

  • Reviderad Function.toString()

Varning

Dessa funktioner är relativt nya.

Äldre webbläsare kan behöva en alternativ kod (Polyfill)


JavaScript-sträng trimStart()

ES2019 lade till strängmetoden trimStart() till JavaScript. <p>Metoden trimStart() fungerar som trim(), men tar bara bort blanksteg från början av ett snöre.

Exempel

let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimStart() Method</h2>

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

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimStart();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

JavaScript-strängen trimStart() stöds i alla moderna webbläsare sedan januari 2020:

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

JavaScript-sträng trimEnd()

ES2019 lade till strängmetoden trimEnd() till JavaScript. <p>Metoden trimEnd() fungerar som trim(), men tar bara bort blanksteg från slutet av ett snöre.

Exempel

let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Strings</h1>
<h2>The trimEnd() Method</h2>

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

<script>
let text1 = "     Hello World!     ";
let text2 = text1.trimEnd();

document.getElementById("demo").innerHTML =
"Length text1 = " + text1.length + "<br>Length text2 = " + text2.length;
</script>

</body>
</html>

JavaScript-strängen trimEnd() stöds i alla moderna webbläsare sedan januari 2020:

Chrome 66 Edge 79 Firefox 61 Safari 12 Opera 50
Apr 2018 Jan 2020 Jun 2018 Sep 2018 May 2018

JavaScript-objekt från Entries()

ES2019 lade till objektmetoden fromEntries() till JavaScript. <p>Metoden fromEntries() skapar ett objekt från itererbara nyckel-/värdepar.

Exempel

const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Objects</h1>
<h2>The fromEntries() Method</h2>

<p>The number of pears are:</p>
<p id="demo"></p>

<script>
const fruits = [
["apples", 300],
["pears", 900],
["bananas", 500]
];

const myObj = Object.fromEntries(fruits);
document.getElementById("demo").innerHTML = myObj.pears;
</script>

</body>
</html>

JavaScript-objekt fromEntries() stöds i alla moderna webbläsare sedan januari 2020:

Chrome 73 Edge 79 Firefox 63 Safari 12.1 Opera 60
Mar 2019 Jan 2020 Oct 2018 Mar 2019 Apr 2019


Valfri hake Bindning

Från ES2019 kan du utelämna catch-parametern om du inte behöver den:.

Exempel

Före 2019:

try {
  // code
} catch (err) {
  // code
}

Efter 2019:

try {
  // code
} catch {
  // code
}

Valfri catch-bindning stöds i alla moderna webbläsare sedan januari 2020:

Chrome 66 Edge 79 Firefox 58 Safari 11.1 Opera 53
Apr 2018 Jan 2020 Jan 2018 Mar 2018 May 2018

JavaScript Array flat()

ES2019 lade till Array flat()-metoden i JavaScript.

Metoden flat() skapar en ny array genom att platta till en kapslad array.

Exempel

const myArr = [[1,2],[3,4],[5,6]];
const newArr = myArr.flat();

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flat() Method</h2>

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

<script>
const myArr = [[1,2],[3,4],[5,6]];

const newArr = myArr.flat();
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

JavaScript Array flat() stöds i alla moderna webbläsare sedan januari 2020:

Chrome 69 Edge 79 Firefox 62 Safari 12 Opera 56
Sep 2018 Jan 2020 Sep 2018 Sep 2018 Sep 2018

JavaScript Array flatMap()

ES2019 lade till Array flatMap()-metoden i JavaScript.

Metoden flatMap() mappar först alla element i en array och skapar sedan en ny array genom att platta till arrayen.

Exempel

const myArr = [1, 2, 3, 4, 5, 6];
const newArr = myArr.flatMap((x) => x * 2);

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Arrays</h1>
<h2>The flatMap() Method</h2>

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

<script>
const myArr = [1, 2, 3, 4, 5,6];
const newArr = myArr.flatMap((x) => x * 2);
document.getElementById("demo").innerHTML = newArr;
</script>

</body>
</html>

Stable Array sort()

ES2019 reviderade metoden Array sort().

Före 2019 tillät specifikationen instabila sorteringsalgoritmer som QuickSort.

Efter ES2019 måste webbläsare använda en stabil sorteringsalgoritm:

När du sorterar element på ett värde måste elementen behålla sin relativa position till andra element med samma värde.

Exempel

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 }
];

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Stable Sort</h1>

<p>From ES2019, browsers must use a stable sorting algorithm.</p>
<p>When sorting elements on a key, the elements must keep their relative position to other objects with the same key.</p>

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

<script>

const myArr = [
  {name:"X00",price:100 },
  {name:"X01",price:100 },
  {name:"X02",price:100 },
  {name:"X03",price:100 },
  {name:"X04",price:110 },
  {name:"X05",price:110 },
  {name:"X06",price:110 },
  {name:"X07",price:110 },
  {name:"X08",price:120 },
  {name:"X09",price:120 },
  {name:"X10",price:120 },
  {name:"X11",price:120 },
  {name:"X12",price:130 },
  {name:"X13",price:130 },
  {name:"X14",price:130 },
  {name:"X15",price:130 },
  {name:"X16",price:140 },
  {name:"X17",price:140 },
  {name:"X18",price:140 },
  {name:"X19",price:140 }
];

myArr.sort( (p1, p2) => {
  if (p1.price < p2.price) return -1;
  if (p1.price > p2.price) return 1;
  return 0;
});

let txt = "";
myArr.forEach(myFunction);

function myFunction(value) {
  txt += value.name + " " + value.price + "<br>"; 
}
document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

I exemplet ovan, vid sortering på pris, får resultatet inte komma ut med namnen i en annan relativ position som så här:

X01 100
X03 100
X00 100
X03 100
X05 110
X04 110
X06 110
X07 110

Reviderad JSON.stringify()

ES2019 reviderade JSON-metoden stringify().

Före 2019 kunde JSON inte strängsätta tecken som kodats med \.

Exempel

let text = JSON.stringify("\u26D4");

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript JSON</h1>
<h2>Revised stringify()</h2>

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

<script>
let text = JSON.stringify("\u26D4");
document.getElementById("demo").innerHTML = JSON.parse(text);
</script>

</body>
</html>

Före ES2019, med JSON.stringify()JSON på UTF-8-kodpunkter (U+D800 till U+DFFF) returnerade trasiga Unicode-tecken som ���.

Efter denna revidering konverterar strängar med UTF-8-kodpunkter säkert med JSON.stringify(), och tillbaka till originalet med JSON.parse().


Separatorsymboler

<p>Ladavgränsare och styckeavgränsare (\u2028 och \u2029) är nu tillåtna i strängliteraler.

Före 2019 behandlades dessa som linjeavslutare och resulterade i felundantag:

Exempel

// This is valid in ES2019:
let text = "\u2028";

Prova själv →

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Strings</h1>

<p>From ES2019, line and paragraph separator symbols (\u2028 and \u2029) are allowed in string literals:</p>

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

<script>
let text = "\u2028";
document.getElementById("demo").innerHTML = text;
</script>

</body>
</html>

Notera

Nu har JavaScript och JSON samma regler.

Före ES2019:

text=JSON.parse('"\u2028"') skulle tolka till ''.

text='"\u2028"' skulle ge syntaxfel.


Reviderad funktion toString()

ES2019 reviderade metoden Function toString().

Metoden toString() returnerar en sträng som representerar källkoden för en funktion.

Från 2019 måste toString() returnera källkoden för funktionen inklusive kommentarer, mellanslag och syntaxdetaljer.

Före 2019 returnerade olika webbläsare olika varianter av funktionen (som utan kommentarer och mellanslag). Från 2019 ska funktionen returneras exakt som den är skriven.

Exempel

function myFunction(p1, p2) {
    return p1 * p2;
}

Prova själv →

<!DOCTYPE html>
<html>
<body>

<h1>JavaScript Functions</h1>
<h2>The toString() Method</h2>

<p>The toString() method returns the function as a string:</p>

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

<script>
function myFunction(a, b) {
  return a * b;
}
document.getElementById("demo").innerHTML = myFunction.toString();
</script>

</body>
</html>