Javascript String

Javascript Stringarre used to represent and operate with a sequence of characters. A Javascript string can be used to represent both an object and a basic (primitive) data type. JavaScript will automatically transform basic strings into String objects, allowing these basic strings to use String methods as well as access attributes.

In this article, you will learn about all of the String methods and attributes available in JavaScript, as well as how to create, compare, and concatenate Javascript strings.

Creating Javascript Strings

There are two (2) methods you can use to create a Javascript string. They are as follows:

1. By string literal
2. By string object (using the new keyword)

1. Double quotations are used to construct the string literal. The syntax for constructing a string using a string literal is as follows:

var stringname="string value";  

Example

<script>  
var str="This is an example of a string literal";  
document.write(str);  
</script>  

2. The syntax for generating a string object with the new keyword is as follows:

var stringname=new String("string literal");  

In this case, the new keyword is used to construct a string example.

Let’s look at an example of a string being created in JavaScript using the new keyword.

<script>  
var stringname=new String("Hi JS string");  
document.write(stringname);  
</script>  

Concatenation

In JavaScript, a string is unchangeable; nevertheless, it may be concatenated using the plus (+) operator. Here’s an example of a string Concatenation;

var str = 'Hello ' + "World " + 'from ' + 'HubToLearn ';

Escaping Special Characters in a String

The backslash (\) character is used to avoid special characters. As an example:

• Unix line break: ‘\n’
• Windows line break: ‘\r\n’
• A backslash (\)
• Tab: ‘\t’

The backslash character is used in the following example to escape the single quotation character in a Javascript string:

let str = 'I\'m a Javascript string!';

Measuring the Length of a Javascript String

The length attribute of a string delivers its length:

let str = "Good Evening!";
console.log(str.length);  // 10

Accessing Characters in a Javascript String

You just use the array-like [] notation with a zero-based index to get the characters in a Javascript string. The example below retrieves the first character of a Javascript string with a Zero Index:

let str = "Hi";
console.log(str[0]); // "H"

The length – 1 index is used to retrieve the Javascript string’s last character:

let str = "Hi";
console.log(str[str.length -1]); // "o"

Converting String to Upper and Lower Case

1. To convert a string to Uppercase, you use “toUpperCase().” For example;

let text1 = "Hi From HubToLearn!";
let text2 = text1.toUpperCase();

2. To convert a string to Lowercase, you use “toLowerCase().” For example;

let text1 = "Hi From HubToLearn!";       // String
let text2 = text1.toLowerCase();  // text2 is text1 converted to lower

“Trimming” Javascript Strings

Trim() eliminates all whitespace from the two sides of a JS string:

let text1 = "      Hello HubToLearn!      ";
let text2 = text1.trim();

Comparing Javascript Strings

To compare Javascript strings, you will have to use comparison operators like =, ==, >, and >=

These comparison operators work by comparing strings depending on the character’s numeric values. It may also produce a string order that differs from the one used by dictionaries. As an example:

let result = 'x' < 'y';
console.log(result); // true

However;

let result = 'x' < 'Y';
console.log(result); // false

All Javascript String Properties

• JS String length: Returns the number of characters in a string
• JS String replace(): replace a substring/pattern in the string
• JS String indexOf(): Returns the first index of occurrence of a value
• JS String lastIndexOf(): Returns the last index of occurrence of a value
• JS String startsWith(): Checks if a string begins with a specified string
• JS String endsWith(): Checks if a string ends with a specified string
• JS String toUpperCase(): Returns uppercase of a string
• JS String toLowerCase(): Returns a lowercase representation of a string
• JS String includes(): Checks if a given string is found inside a string
• JS String repeat(): Returns a string by repeating it given times
• JS String charAt(): Returns character at a specified index in the string
• JS String charCodeAt(): Returns Unicode of the character at a given index
• JS String fromCharCode(): Returns a string from the given UTF-16 code units
• JS String substring(): Returns a specified part of the string
• JS String padStart(): Pads a string at the start to a given length
• JS String padEnd(): Pads a string at the end to a given length
• JS String codePointAt(): Returns the Unicode point value at a given index
• JS String fromCodePoint(): Returns a string using the given code points
• JS String match(): Returns result of matching string with a regex
• JS String matchAll(): Returns iterator of results matching with a regex
• JS String localeCompare(): Compares two strings in the current locale
• JS String search(): Searches for the specified values in the string
• JS String replaceAll(): Returns string by replacing all matching patterns
• JS String concat(): Concatenates the arguments to the calling string
• JS String split(): Returns the string divided into a list of substring
• JS String trim(): Removes whitespace from both ends of a string
• JS String slice(): Extracts and returns a section of the string

Quick Exercise

Convert this text into a LOWERCASE text: