JavaScript String Strategies for Concatenation and Substitution

Welcome to the third and ultimate article in our sequence on JavaScript string strategies. The JavaScript Strategies for Looking out Strings tutorial offered the whole listing of JavaScript (JS) strategies for working with strings, together with detailed explanations of JavaScript’s eight string looking strategies. Within the final article, we checked out strategies for trimming, padding, and extracting strings. This installment will cowl concatenate strings, change a part of a string, change its case, and a complete lot extra!

You’ll be able to try the earlier two elements on this sequence right here:

Find out how to Concatenate Strings in JavaScript

Concatenation is the method of appending one string to the tip of one other string. You might be most likely already conversant in the + string concatenation operator. The distinction is that concat () coerces its arguments on to String objects, whereas + coerces its operands to primitives first.

Syntax of concat () in JavaScript

string.concat (str1)
string.concat (str1, str2)
string.concat (str1, str2, /* ..., */ strN)

Examples of concat () in JavaScript

const greeting = "Hello ";
// Outputs "Hello Rob. Have a great one!"
console.log(greeting.concat("Rob", ". Have a great one."));

const greetList = ["Rob", " and ", "George", "!"];
// Outputs "Hello Rob and George!"
console.log(greeting.concat(...greetList));

//Kind conversion
"".concat ({}); // "[object Object]"
"".concat ([]); // ""
"".concat (null); // "null"
"".concat (true); // "true"
"".concat (6, 7); // "67"

Find out how to Substitute Textual content in JavaScript

To interchange textual content in a JavaScript string, internet builders have two selections: the change() and replaceAll() strategies. Each strategies search a string for a selected string or common expression. The change() technique substitutes the primary match with the required worth and returns it as a brand new string. In the meantime, because the title suggests, replaceAll() replaces all matches.

Syntax of change() and replaceAll()

string.change(sample, alternative)
string.replaceAll(sample, alternative)

Examples of change() and replaceAll()

In follow, each strategies are nearly an identical, as a result of replaceAll() is not going to change all matches until you employ a RegEx for the sample and embody the g flag. As seen within the examples under, doing so with change() will yield the identical outcomes!

let str="I studied on the Faculty of Rock in addition to the varsity of life!";
// Utilizing a precise string sample
console.log(str.change('Faculty', 'Institute'));
// Case insensitive
console.log(str.change(/faculty/i, 'Institute'));
// Replaces ALL occurences
console.log(str.change(/faculty/ig, 'Institute'));
// Replaces ALL occurences utilizing replaceAll()
console.log(str.replaceAll(/faculty/ig, 'Institute'));
// Throws a TypeError as a result of the g flag is required when utilizing replaceALL()
console.log(str.replaceAll(/faculty/i, 'Institute'));

Be aware that replaceAll() is an ES2021 characteristic and doesn’t work in Web Explorer.

Learn: Finest On-line Programs to Study JavaScript

Find out how to Change Case in JavaScript

You’ll be able to convert a string to higher and decrease case utilizing the toUpperCase() and toLowerCase() strategies, respectively.

Syntax of toLowerCase() and toUpperCase()

Neither technique accepts parameters, so they’re quite simple to make use of:

string.toUpperCase()
string.toLowerCase()

Examples of toLowerCase() and toUpperCase()

const sentence="Robert likes to eat at The Greasy Spoon Diner.";
// Output: "robert likes to eat on the greasy spoon diner."
console.log(sentence.toLowerCase());

// Output: "ROBERT LIKES TO EAT AT THE GREASY SPOON DINER."
console.log(sentence.toUpperCase());

Working with Characters and Unicode in JavaScript

JavaScript strings are primarily based on Unicode, with every character being represented by a byte sequence of 1-4 bytes. Subsequently, JavaScript provides a variety of strategies to work with particular person characters and bytes.

Here’s a recap of JavaScript’s strategies for working with characters and Unicode:

charAt(): returns character at a specified index in string
charCodeAt(): returns Unicode of the character at given index
fromCharCode(): returns a string from the given UTF-16 code items
codePointAt(): returns the Unicode level worth at given index
fromCodePoint(): returns a string utilizing the given code factors

Syntax of JavaScript Unicode Strategies

string.charAt(index)
string.charCodeAt(index)
string.codePointAt(index)
String.fromCharCode(n1, n2, ..., nX)
String.fromCodePoint(n1, n2, ..., nX)

charAt(), charCodeAt(), and codePointAt() all settle for an integer between 0 and the string size minus 1. If the index can’t be transformed to the integer or no index is supplied, the default is 0 and the primary character of the string is returned.

The fromCharCode() and fromCodePoint() strategies are each static; fromCharCode() accepts a sequence of Unicode code factors, whereas fromCodePoint() accepts a number of Unicode values to be transformed.

Examples of Unicode Strategies

const str = "Exterior my window there’s an open street";
// charAt() ***********************************************
// No index was supplied, used 0 as default
console.log(str.charAt()); // O
// Explicitly offering 0 as index
console.log(str.charAt(0)); // O
console.log(str.charAt(3)); // s
console.log(str.charAt(999)); // ""

// charCodeAt() *******************************************
// No index was supplied, used 0 as default
console.log(str.charCodeAt()); // 79
// Explicitly offering 0 as index
console.log(str.charCodeAt(0)); // 79
console.log(str.charCodeAt(3)); // 115
console.log(str.charCodeAt(999)); // NaN

// codePointAt() *******************************************
"ABC".codePointAt(0); // 65
"ABC".codePointAt(0).toString(16); // 41

"😍".codePointAt(0); // 128525
"ud83dude0d".codePointAt(0); // 128525
"ud83dude0d".codePointAt(0).toString(16); // 1f60d
"😍".codePointAt(1); // 56845
"ud83dude0d".codePointAt(1); // 56845
"ud83dude0d".codePointAt(1).toString(16); // de0d

"ABC".codePointAt(40); // undefined

// fromCharCode() ******************************************
// Outputs "½+¾="
console.log(String.fromCharCode(189, 43, 190, 61));

// fromCodePoint() *****************************************
// Outputs "☃★♲你"
console.log(String.fromCodePoint(9731, 9733, 9842, 0x2F804));

Learn: Prime Collaboration Instruments for Net Builders

Miscellaneous String Strategies in JavaScript

A few String strategies don’t fall into any of the above classes. They’re localeCompare(), which compares two strings within the present locale, and repeat(), which returns a string by repeating it given instances. Let’s check out every of them.

localeCompare() Syntax

localeCompare(compareString)
localeCompare(compareString, locales)
localeCompare(compareString, locales, choices)

Of the three enter parameters above, solely the compareString is required.

The locales must be a string, or array of strings, with a BCP 47 language tag.

The choices are an object that modify the output format.

Examples of localeCompare()

// The letter "a" is earlier than "c" leading to a unfavorable worth
"a".localeCompare("c"); // -2 or -1 (or another unfavorable worth)

// Alphabetically the phrase "verify" comes after "towards" leading to a optimistic worth
"verify".localeCompare("towards"); // 2 or 1 (or another optimistic worth)

// "a" and "a" are equal leading to a impartial worth of zero
"a".localeCompare("a"); // 0

console.log("ä".localeCompare("z", "de")); // a unfavorable worth: in German, ä types earlier than z
console.log("ä".localeCompare("z", "sv")); // a optimistic worth: in Swedish, ä types after z

// in German, ä has a as the bottom letter
console.log("ä".localeCompare("a", "de", { sensitivity: "base" })); // 0
// in Swedish, ä and a are separate base letters
console.log("ä".localeCompare("a", "sv", { sensitivity: "base" })); // a optimistic worth

repeat() Syntax

The repeat() technique’s one enter parameter is an integer of 0 or above, indicating the variety of instances to repeat the string. Passing in a unfavorable quantity leads to a RangeError.

repeat(depend)

Examples of repeat() Methodology

"abc".repeat(-1); // RangeError
"abc".repeat(0); // ''
"abc".repeat(1); // 'abc'
"abc".repeat(2); // 'abcabc'
"abc".repeat(3.5); // 'abcabcabc' (depend will probably be transformed to integer)
'abc'.repeat(1 / 0); // RangeError

You can see a demo of at the moment’s strategies on Codepen.io.

Last Ideas on JavaScript String Strategies for Concatenation and Substitution

On this third and ultimate internet growth tutorial in our sequence on JavaScript string strategies, we discovered concatenate strings, change a part of a string, change its case, and a complete lot extra. All the strategies offered right here at the moment ought to work in all trendy browsers, until in any other case indicated.

Learn extra internet growth and JavaScript programming tutorials.

Technological View