Monday, March 27, 2023
HomeSoftware DevelopmentJavaScript String Strategies for Concatenation and Substitution

JavaScript String Strategies for Concatenation and Substitution

JavaScript tutorial

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

You’ll be able to take a look at the earlier two components on this collection right here:

How you can 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 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!"

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

How you can Exchange Textual content in JavaScript

To interchange textual content in a JavaScript string, internet builders have two decisions: the change() and replaceAll() strategies. Each strategies search a string for a selected string or common expression. The change() methodology 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 just about equivalent, as a result of replaceAll() won’t change all matches until you utilize a RegEx for the sample and embrace the g flag. As seen within the examples beneath, doing so with change() will yield the identical outcomes!

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

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

Learn: Finest On-line Programs to Be taught JavaScript

How you can 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 methodology accepts parameters, so they’re quite simple to make use of:


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."


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 gives a lot 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 models
  • codePointAt(): returns the Unicode level worth at given index
  • fromCodePoint(): returns a string utilizing the given code factors

Syntax of JavaScript Unicode Strategies

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 offered, 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 highway";
// charAt() ***********************************************
// No index was offered, 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 offered, 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 occasions. Let’s check out every of them.

localeCompare() Syntax

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

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

The locales ought to 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 unfavourable worth
"a".localeCompare("c"); // -2 or -1 (or another unfavourable worth)

// Alphabetically the phrase "verify" comes after "in opposition to" leading to a optimistic worth
"verify".localeCompare("in opposition to"); // 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 unfavourable 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() methodology’s one enter parameter is an integer of 0 or above, indicating the variety of occasions to repeat the string. Passing in a unfavourable quantity ends in a RangeError.


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 might be transformed to integer)
'abc'.repeat(1 / 0); // RangeError

You’ll find a demo of as we speak’s strategies on

Remaining Ideas on JavaScript String Strategies for Concatenation and Substitution

On this third and closing internet improvement tutorial in our collection on JavaScript string strategies, we realized how one can concatenate strings, change a part of a string, change its case, and an entire lot extra. All the strategies offered right here as we speak ought to work in all fashionable browsers, until in any other case indicated.

Learn extra internet improvement and JavaScript programming tutorials.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments