JavaScript String Strategies for Concatenation and Substitution

Welcome to the third and closing article in our collection on JavaScript string strategies. The JavaScript Strategies for Looking out Strings tutorial introduced the entire record 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 tips on how to concatenate strings, exchange a part of a string, change its case, and a complete lot extra!

You may take a look at the earlier two elements on this collection 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’re in all probability already aware of 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 an excellent one!"
console.log(greeting.concat("Rob", ". Have an excellent one."));

const greetList = ["Rob", " and ", "George", "!"];
// Outputs "Hello Rob and George!"
console.log(greeting.concat(...greetList));

//Sort conversion
"".concat ({}); // "[object Object]"
"".concat ([]); // ""
"".concat (null); // "null"
"".concat (true); // "true"
"".concat (6, 7); // "67"

Find out how to Change Textual content in JavaScript

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

Syntax of exchange() and replaceAll()

string.exchange(sample, substitute)
string.replaceAll(sample, substitute)

Examples of exchange() and replaceAll()

In observe, each strategies are just about equivalent, as a result of replaceAll() won’t exchange all matches except you utilize a RegEx for the sample and embody the g flag. As seen within the examples under, doing so with exchange() 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.exchange('Faculty', 'Institute'));
// Case insensitive
console.log(str.exchange(/faculty/i, 'Institute'));
// Replaces ALL occurences
console.log(str.exchange(/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 may 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. Due to this fact, JavaScript presents various 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: High 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 adverse worth
"a".localeCompare("c"); // -2 or -1 (or another adverse worth)

// Alphabetically the phrase "examine" comes after "in opposition to" leading to a constructive worth
"examine".localeCompare("in opposition to"); // 2 or 1 (or another constructive worth)

// "a" and "a" are equal leading to a impartial worth of zero
"a".localeCompare("a"); // 0

console.log("ä".localeCompare("z", "de")); // a adverse worth: in German, ä kinds earlier than z
console.log("ä".localeCompare("z", "sv")); // a constructive worth: in Swedish, ä kinds 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 constructive 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 adverse quantity leads to a RangeError.

repeat(rely)

Examples of repeat() Methodology

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

You will discover a demo of right this moment’s strategies on Codepen.io.

Last Ideas on JavaScript String Strategies for Concatenation and Substitution

On this third and closing net improvement tutorial in our collection on JavaScript string strategies, we discovered tips on how to concatenate strings, exchange a part of a string, change its case, and a complete lot extra. The entire strategies introduced right here right this moment ought to work in all trendy browsers, except in any other case indicated.

Learn extra net improvement and JavaScript programming tutorials.