JavaScript for LWC: String Methods

String is a series of characters which are present within a single or double quotes. JavaScript provides various built in string methods to manipulate and perform transformations on string. We can use spread operator to perform concatenation, reversal and many more operation on strings.

What is Autoboxing?

Autoboxing is automated conversion of primitive datatype into an object so that we can use properties and methods on it. In JavaScript strings are typically primitive but when you access property or string on a string. JavaScript temporarily wraps it in String object.

Strings are immutable, string methods return new string instead of updating the original one.

let input = "  LWC   ";
console.log(input.trim());
console.log(input);

Output

LWC
  LWC   

String Methods

String includes() method

inlcudes() methos determine whether specified string is present or not in the string on which method is called. return type of includes() method is Boolean.

let input = 'LWC is better than Lightning Aura';
console.log(input.includes('LWC'));
console.log(input.includes('aura'));
console.log(input.includes(' Light'));
console.log(input.includes('better',7));

Output

true
false
true
true

From line 03 we can conclude that includes() method is case sensitive. Position parameter is optional, it determines starting point of search of given string. If position value is 8 in line no. 5, then it will return false.

String indexOf() method

This method returns the position/index of first occurrence of specified substring in string. indexOf() method takes two parameters i.e. searchString (It is a substring to search in string) and fromSearch (It is optional parameter to start search from given index. By default, it is 0)

let input = 'LWC is better than Lightning Aura';
console.log(input.indexOf('LWC'));
console.log(input.indexOf('aura'));
console.log(input.indexOf(' Light'));
console.log(input.indexOf('better',3));
console.log(input.indexOf(''));

Output

0
-1
18
7
0

From line no. 3 we can conclude that indexOf() method is case sensitive and it returns -1 if string is not found. If value is not specified in searchString parameter, it will search for undefined

String startsWith() method

startsWith() method returns true if string starts with specified string otherwise, it returns false. This method is case sensitive.

let input = 'LWC is better than Lightning Aura';
console.log(input.startsWith('LWC'));
console.log(input.startsWith('lwc'));
console.log(input.startsWith('aura'));
console.log(input.startsWith(''));

Output

true
false
false
true

Line no. 5 returns true because, trivially blank string found at beginning of any string.

String slice() method

slice() method returns extracted portion of string from specified beginning and ending index. endIndex is an optional parameter by default it will extract till the end of the string. This method does not update original string instead of it returns new string with extracted portion.

let input = 'LWC is better than Lightning Aura';
console.log(input.slice(9,15));
console.log(input.slice(7));
console.log(input.slice(-14, -1));

Output

tter t
better than Lightning Aura
Lightning Aur

Negative value in parameters indicate that values are counted from backwards.

String trim() method

trim() method removes whitespace from both the ends. This method returns a new string instead of updating original one. It does not take any parameter.

let input = '  LWC is better than Lightning Aura  ';
console.log(input.trim());

Output

LWC is better than Lightning Aura

String toLowerCase() method

toLowerCase() returns the string converted to lower case. It throws an TypeError if called on null or undefined . This method does not update the original string. It does not take any parameter.

let input = 'LWC is better than Lightning Aura';
console.log(input.toLowerCase());

Output

lwc is better than lightning aura

String toUpperCase() method

toUpperCase() returns the string converted to upper case. This method does not modify the original string instead of which it returns the new string.

let input = 'LWC is better than Lightning Aura';
console.log(input.toUpperCase());

Output

LWC IS BETTER THAN LIGHTNING AURA

String replace() method

replace() function used to replace the parts of string with new string. This method accepts string or regular expression as the pattern to match and it returns an updated new string.

let input = 'LWC is better than Lightning Aura';
console.log(input.replace('LWC', 'Lightning Web Component'));

Output

Lightning Web Component is better than Lightning Aura

replace() method using regex expression

let text = "JavaScript is awesome. I love JavaScript!";
let result = text.replace(/JavaScript/g, "JS");
console.log(result);

Output

JS is awesome. I love JS!

g flag ensures that every occurrence is replaced and i flag is used for case insensitivity.

These JavaScript string methods are incredibly useful for transforming and working with text. By mastering these methods, you can enhance your skills in manipulating user input, displaying information dynamically, and creating a more responsive experience in your LWC applications.

In this post we have covered only frequently used string methods. Please checkout other methods too.