DEV Community

Cover image for JavaScript Strings
Bello Osagie
Bello Osagie

Posted on • Updated on

JavaScript Strings

image.png


Strings

Strings are text in quotation marks - single quotes (' ') double quotes (" "), or backtick quotes.

See the example below:

const str1 = 'This is a text in the single quote.';
const str2 = "This is a text in double-quotes.";
const str3 = `This is a text in backticks quotes.`;
Enter fullscreen mode Exit fullscreen mode

Strings also includes pretty nice methods like includes('...'), indexOf('...'), etc.

const str = 'This is a text in the single quote.';

str.includes('text'); // true
Enter fullscreen mode Exit fullscreen mode

The internal format for strings is always UTF-16

String Template Literals

Backticks are best used for template literals.

The syntax for the template literals is shown below:

`... ${expression} ...`
Enter fullscreen mode Exit fullscreen mode

See the example below:

const myName = (fName, lName) => {
    return fName + ' ' + lName;
};

console.log(`His name is ${myName('Osagie', 'Bello').}`);
// His name is Osagie Bello.
Enter fullscreen mode Exit fullscreen mode

String in Multi-lines

Text in backtick can easily span multiple lines.

See the example below:

const str = `Hello World! 
My name is: 
Last Name - Bello
FirstName - Osagie`;

console.log(str);

/*
Hello World! 
My name is: 
Last Name - Bello
FirstName - Osagie
*/
Enter fullscreen mode Exit fullscreen mode

Alternatively, the newline character \n can be used to escape to a new line.

See the example below:

const str = 'Hello World!\nMy name is:\nLast Name - Bello\nFirstName - Osagie';

console.log(str);

/*
Hello World!
My name is:
Last Name - Bello
FirstName - Osagie
*/
Enter fullscreen mode Exit fullscreen mode

Instead of having all text in a single line, you can escape to a new line with the \.

See the example below:

const str = 'Hello World!\n\
My name is:\n\
Last Name - Bello\n\
FirstName - Osagie';

console.log(str);
Enter fullscreen mode Exit fullscreen mode

Quotes in String

It is possible to insert quotes in a string.

See the example below:

const str1 = 'Martin Luther King once said "The time is always right to do what is right". 🤔';
const str2 = "Martin Luther King once said \"The time is always right to do what is right\". 🤔";
const str3 = `Martin Luther King once said "The time is always right to do what is right". 🤔`;
const str4 = 'It\'s my birthday. 😁';
const str5 = `It's my birthday. 😁`;
Enter fullscreen mode Exit fullscreen mode

Only the quotes that are the same as the enclosing ones need to be escaped.

MDN contains the complete list of escape characters.


String Length

The string length is the number of characters in a word or sentence (including space).

The syntax is:

str.length
Enter fullscreen mode Exit fullscreen mode

See the example below:

'Hello World'.length; // 11
'Hello\nWorld'.length; // 11'
Enter fullscreen mode Exit fullscreen mode

Escape characters, spaces are all special characters included in the .length count.



Accessing Characters

The zero-based index is used to access characters in a string.

str[numPos]
Enter fullscreen mode Exit fullscreen mode

The numPos is in a zero-based index position.

See the example below:

const str = `Hello World`;

// the first character
console.log( str[0] ); // H

// the fifth character
console.log( str[4] ); // o
Enter fullscreen mode Exit fullscreen mode

Alternatively, the charAt(...) method can be used

str.charAt(numPos)
Enter fullscreen mode Exit fullscreen mode

See the example below:

const str = `Hello World`;

// the first character
console.log( str.charAt(0) ); // H

// the fifth character
console.log( str.charAt(4) ); // o
Enter fullscreen mode Exit fullscreen mode

The easy way to access characters counting from the last index is to use the length number property.

str[str.length-N] // N = 1, 2,...
str.charAt(str.length-N) // N = 1, 2,...
Enter fullscreen mode Exit fullscreen mode

See the example below:

const str = `Hello World`;

console.log( str.charAt(str.length-1) ); // d
console.log( str[str.length-1] ); // d
Enter fullscreen mode Exit fullscreen mode

The above example is the same as below:

console.log( str.slice(-1) ); // d
Enter fullscreen mode Exit fullscreen mode

Looping String characters

Iteration can be performed on string characters using for..of

for (let char of "Hello") {
  console.log(char);

  /* 
  H
  e
  l
  l
  o => char is now o
  */

  char === 'H' // false
  char === 'e' // false
  char === 'l' // false
  char === 'o' // true
}, 
Enter fullscreen mode Exit fullscreen mode

Immutable Strings

Once a string is created, it can't be changed

const myName = 'Bello';

myName[2] = 'y';
console.log( myName, myName[2] ); // Bello l
Enter fullscreen mode Exit fullscreen mode

You can use the replace method replace(...) to replace part a string.

The syntax is shown below:

str.replace(oldStr, newStr)
Enter fullscreen mode Exit fullscreen mode

See the examples below:

const myName = 'Bello';

const newName = myName.replace('Bello', 'Beylo');
console.log( newName, newName[2] ); // Beylo y
Enter fullscreen mode Exit fullscreen mode
const str = "I love front-end web development"
const newStr = str.replace('front', 'back');
console.log(newStr);
Enter fullscreen mode Exit fullscreen mode

String Methods

There are a couple of ways to use a method on a string.

See the example below of some built-in method:

let str = 'Bello';
console.log( str.toUpperCase() ); // BELLO
console.log( str.toLowerCase() ); // bello

str = 'bello';
console.log( str[0].toUpperCase(), str ); // B bello

str = 'Hello Bello';
console.log( str.startsWith("Hel") ); // true
console.log( str.endsWith("ello") ); // true
console.log( str.endsWith("Bell") ); // false

str = '#DevCommunity';
console.log( str.startsWith("#Dev") ); // true
console.log( str.endsWith("unity") ); // true

str = 'JavaScript is one of the best programming languages';
console.log( str.indexOf('Script') ); // 4 => S is defined in Script
console.log( str.indexOf('script') ); // -1 => s is undefined in script

str = 'name1, name2, name3, name4,... nameN';
const name = 'name';
console.log(`The index of the first "${name}" 
from the end of the string is ${str.lastIndexOf(name)}`);

/*
The index of the first "name" 
from the end of the string is 31
*/

console.log(`The index of the first "${name}" 
from the start of the string is ${str.indexOf(name)}`);

/*
The index of the first "name" 
from the start of the string is 0
*/

str.includes('name3'); // true

const row = 'row, ';
const boat = 'boat...';
str = `${row.repeat(3)}the ${boat.repeat(1)}🎶`; 
console.log(str); // row, row, row, the boat...🎶

str = 'Longest word: pneumonoultramicroscopicsilicovolcanoconiosis'
console.log( str.slice(0, 20) ); 
// Longest word: pneumo => 0 to 19, 20 not included

str = 'Bello Osagie';
console.log( str.slice(6) ); 
// Osagie => same as (str.slice(6, str.length) )

str = "stringify";
console.log( str.slice(-4, -1) ) // gif

console.log( str.substring(2, 6) ) // ring
console.log( str.slice(2, 6) ) // ring
console.log( str.slice(2, 6) ) // ring
console.log( str.substr(2, 4) ); // ring
str.substr(-4, 2); // gi

console.log( str.substring(2, 6) === str.substring(6, 2) ) // true
console.log( str.slice(2, 6) === str.slice(6, 2) ) // false

const greeting = '   Hello world!   ';

console.log(greeting.trim()); // Hello world!;

str = '6';

console.log(str.padStart(2, '0')); // 06
console.log(str.padStart(3, '0')); // 006
console.log(str.padStart(3, '1')); // 116

const accountNum = '168939002125581';
const last4Digits = accountNum.slice(-4);
const encrypt = last4Digits.padStart(accountNum.length, '*');
console.log(encrypt); // ************5581

console.log( `confirm your account number: ${encrypt}` );
// confirm your account number: ************5581
Enter fullscreen mode Exit fullscreen mode

MDN contains the complete list of string methods.

method selects negative
slice(start, end) from start to end (not including end) allows negatives
substring(start, end) between start and end negative values mean 0
substr(start, length) from start get length characters allows negative start

Iterable Strings

A String is iterable because it is a collection of characters. It iterates over each character in a string.

See the example below:

const myString = 'Bello Osagie';

for (let char = 1; char <= myString.length-1; char++) {
  console.log(myString[char]);
}

/*
B
e
l
l
o

O
s
a
g
i
e
*/
Enter fullscreen mode Exit fullscreen mode

An alternative approach is to use for...in.

The example above is the same as below:

const myString = 'Bello Osagie';

for (let char in myString) {
  console.log(myString[char]);
}
Enter fullscreen mode Exit fullscreen mode

We can also use for...of to loop through each character in a string.

const myString = 'Bello Osagie';

for (let char of myString) {
  console.log(char);
}
Enter fullscreen mode Exit fullscreen mode

The for...of is faster than for...in when iterating only characters.

Happy coding!!!


image.png


safe_image.jpg


Top comments (0)