9.9 JS 2021/2022

JavaScript String ReplaceAll()

ES2021 introduced the string method replaceAll():

Example 1: JS Strings - The replaceAll() Method part 1

text = text.replaceAll("Cats","Dogs");
text = text.replaceAll("cats","dogs");

• The replaceAll() method allows you to specify a regular expression instead of a string to be replaced.
• If the parameter is a regular expression, the global flag (g) must be set, otherwise a TypeError is thrown.

Example 2: JS Strings - The replaceAll() Method part 2

text = text.replaceAll(/Cats/g,"Dogs");
text = text.replaceAll(/cats/g,"dogs");

• Note
• ES2020 introduced the string method matchAll().

JavaScript Numeric Separator (_)

ES2021 intoduced the numeric separator (_) to make numbers more readable:

Example 3: JS Numbers - Numeric Separator (_) part 1

const num = 1_000_000_000;

The numeric separator is only for visual use.

Example 4: JS Numbers - Numeric Separator (_) part 2

const num1 = 1_000_000_000;
const num2 = 1000000000;
(num1 === num2); 

The numeric separator can be placed anywhere in a number:

Example 5: JS Numbers - Numeric Separator (_) part 3

const num1 = 1_2_3_4_5;

• Note
• The numeric separator is not allowed at the beginning or at the end of a number.
• In JavaScript only variables can start with _.

The numeric separator is supported in all modern browsers since January 2020:

Chrome 75	Edge 79	Firefox 74	Safari 13.1	Opera 67
Jun 2019	Jan 2020	Oct 2019	Sep 2019	Jun 2019

JavaScript Array at()

ES2022 intoduced the array method at():

Example 6: JS Arrays - Array at()

Get the third element of fruits:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits.at(2);

Get the third element of fruits:

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let fruit = fruits[2];

Try it yourself

• The at() method returns an indexed element from an array.
• The at() method returns the same as [].
• The at() method is supported in all modern browsers since March 2022:

Chrome 92	Edge 92	Firefox 90	Safari 15.4	Opera 78
Apr 2021	Jul 2021	Jul 2021	Mar 2022	Aug 2021

• Note
• Many languages allows negative bracket indexing like [-1] to access elements from the end of an object / array / string.
• This is not possible in JavaScript, because [] is used for accessing both arrays and objects. obj[-1] refers to the value of key -1, not to the last property of the object.
• The at() method was introduced in ES2022 to solve this problem.

JavaScript String at()

ES2022 intoduced the string method at():

Example 7: JS Strings - The at() Method

Get the third letter of name:

const name = "W3Schools";
let letter = name.at(2);

Get the third letter of name:

const name = "W3Schools";
let letter = name[2];

Try it yourself

• The at() method returns an indexed element from an string.
• The at() method returns the same as [].
• The at() method is supported in all modern browsers since March 2022:

Chrome 92	Edge 92	Firefox 90	Safari 15.4	Opera 78
Apr 2021	Jul 2021	Jul 2021	Mar 2022	Aug 2021