DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Yaser Adel Mehraban
Yaser Adel Mehraban

Posted on • Updated on

All you need to know about string in JavaScript 🧡

String is one of the primitive types in JavaScript and we use it in every project we work on no matter what. But how familiar are you with the methods available in JavaScript to work with a string variable? Let's have a quick look at those in this article.

Introduction

A primitive value such as "Yas" doesn't have any methods or properties, mainly because it's not an object. But with JavaScript, methods and properties are available because it treats primitive values as objects.

Let's have a look at the simplest method you have most definitely used:

String length

The length property returns the length of a string:

const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
console.log(alphabet.length); // 26
Enter fullscreen mode Exit fullscreen mode

Pay attention on how length property is available on a primitive type. Not all languages are following the same principle when dealing with such behaviour though. In PHP we have helper functions:

<?php
echo strlen("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
?>
Enter fullscreen mode Exit fullscreen mode

Finding a text in string

There are a few methods to help you find a sub-string in a String. Let's go through them and see what are their differences:

indexOf

The indexOf method returns the index of the first occurrence of a specified text in a string:

const txt = "Can you find Yas in 'dryasdust'?";
console.log(txt.indexOf('yas')); // 23
Enter fullscreen mode Exit fullscreen mode

There a few points you need to know here. First, JavaScript counts positions from zero, and second, indexOf is case sensitive.

const txt = "Can you find Yas in 'dryasdust'?";
console.log(txt.indexOf('Yas')); // 13
Enter fullscreen mode Exit fullscreen mode

This method returns -1 if it can't find the text:

const txt = "There is no 0 in 11";
console.log(txt.indexOf('zero')); // -1
Enter fullscreen mode Exit fullscreen mode

You can pass a second argument to let the indexOf know where to start looking for the text:

const txt = "We have SQL and no-SQL databases!";
console.log(txt.indexOf('SQl', 10)); // 19
Enter fullscreen mode Exit fullscreen mode

lastIndexOf

As the name suggests, lastIndexOf is used to find the last occurrence of a text in a string.

const txt = "Can you find Jam in 'JamStack'?";
console.log(txt.indexOf('Jam')); // 21
Enter fullscreen mode Exit fullscreen mode

This method also returns -1 if it can't find the text you're looking for, and takes a second parameter to start the search. However, since this method starts the search backward, the second parameter acts as cutting the string from that position to the end:

const txt = "Can you find Jam in 'JamStack'?";
console.log(txt.lastIndexOf('Jam', 6)); // -1
Enter fullscreen mode Exit fullscreen mode

search

The search method also searches the string for a text and returns the first occurrence of the text:

const txt = "Can you find Jam in 'JamStack'?";
console.log(txt.search('Jam')); // 13
Enter fullscreen mode Exit fullscreen mode

You might think that search and indexOf are the same. However, there are differences in these two:

  • search doesn't accept any other parameter
  • indexOf cannot take powerful search values such as regular expressions

That's right, search will accept regex as argument as well, for example, to perform a case insensitive search you might want to use search instead of indexOf:

const txt = "There is Jam in JamStack!";
console.log(str.search(/jam/i)); // 9

console.log(txt.indexOf('jam')); // -1
Enter fullscreen mode Exit fullscreen mode

You can also search for non usual patterns, e.g. finding any character that is not a word or whitespace:

const txt = "There is Jam in JamStack!";
console.log(txt.search(/[^\w\s]/g)); // 24
Enter fullscreen mode Exit fullscreen mode

endsWith

The endsWith methods checks whether the string ends with the specified text. It returns true if it does, and false if it doesn't:

const txt = "There is Jam in JamStack!";
console.log(txt.endsWith("Stack!")); // true
Enter fullscreen mode Exit fullscreen mode

πŸ’‘ This method is case sensitive.

startsWith

Similar to endsWith, this method checks whether a string starts with the specified text. This method is also case sensitive:

const txt = "JamStack's got Jam";
console.log(txt.startsWith("JamStack")); // true
Enter fullscreen mode Exit fullscreen mode

includes

includes allows you to check whether or not a string contains a specified text and is case sensitive:

const txt = "There is Jam in JamStack!";
console.log(txt.includes("in")); // true
console.log(txt.includes("Jam")); // true
console.log(txt.includes("jam")); // false
Enter fullscreen mode Exit fullscreen mode

localeCompare

localeCompare will compare two strings in the current locale. It returns a negative number indicating if the reference string occurs before the compare string, positive if it occurs after, and 0 if they are equivalent:

const a = 'rΓ©servΓ©'; 
const b = 'RESERVE';
console.log(a.localeCompare(b)); // 1
console.log(a.localeCompare(b, 'en', { sensitivity: 'base' })); // 0
Enter fullscreen mode Exit fullscreen mode

Extracting sub-strings

There are three methods which allow you to extract part of a string.

slice

slice extracts part of a string and returns the extracted part in a new string. It takes two arguments, start position, and end position (the end position will not be included).

const txt = "There is Jam in JamStack!";
console.log(txt.slice(9, 12)); // Jam
Enter fullscreen mode Exit fullscreen mode

If you pass a negative value, it will start from the end of the string:

const txt = "There is Jam in JamStack!";
console.log(txt.slice(-16, -13)); // Jam
Enter fullscreen mode Exit fullscreen mode

You can omit the second parameter, and it will extract from start to the end of the string:

const txt = "There is Jam in JamStack!";
console.log(txt.slice(16)); // JamStack!
Enter fullscreen mode Exit fullscreen mode

substring

The substring method is similar to slice but it won't accept negative indexes:

const txt = "There is Jam in JamStack!";
console.log(txt.substring(16)); // JamStack!
console.log(txt.substring(9, 12)); // Jam
Enter fullscreen mode Exit fullscreen mode

substr

substr method is similar to slice with one difference that the second parameter is the length of the text to be extracted and not the position:

const txt = "There is Jam in JamStack!";
console.log(txt.substr(9, 3)); // Jam
Enter fullscreen mode Exit fullscreen mode

And if you omit the second parameter, it will extract to the end of the string. Furthermore, if the index you pass is negative, it will count from the end:

const txt = "There is Jam in JamStack!";
console.log(txt.substr(-9)); // JamStack!
Enter fullscreen mode Exit fullscreen mode

split

Although this method is not directly used for extracting a text value, it's good for splitting the string value by a character and return an array of substrings:

const txt = "There is Jam in JamStack!";
const words = txt.split(' ');
console.log(words[4]); // JamStack!
Enter fullscreen mode Exit fullscreen mode

A few points regarding this method:

  • The simplest case is a single character, also referred to as delimiter. For example you can split a tab separated value (TSV) by using str.split("\t").
  • If the separator contains multiple characters, that entire string needs to be found.
  • If the separator cannot be found, the return value is an array with one element containing the whole string.
  • If the separator appears at the beginning or end of the array, it still counts. Meaning the return value is an array with a string value, and one empty string item either at the start or at the end of the array.
  • If you pass an empty string " as the separator, it splits the string into single UTF-16 characters.
const txt = "There is Jam in JamStack!";
console.log(txt.split('Jam')); // ["There is ", " in ", "Stack!"]
console.log(txt.split('test')); // ["There is Jam in JamStack!"]
console.log(txt.split('There')); // ["", " is Jam in JamStack!"]
console.log(txt.split('')); // ["T", "h", "e", "r", "e", " ", "i", "s", " ", "J", "a", "m", " ", "i", "n", " ", "J", "a", "m", "S", "t", "a", "c", "k", "!"]
Enter fullscreen mode Exit fullscreen mode

Replacing string content

The replace method, as the name suggests, replaces a part of the string with the provided text:

const txt = "Who's awesome!";
console.log(txt.replace("Who's", "You're")); // You're awesome!
Enter fullscreen mode Exit fullscreen mode

πŸ’‘ This method doesn't change the original string, it returns a new one.

By default, it's case sensitive and just replaces the first match:

const txt = "This 🐢 is a good 🐢!";
console.log(txt.replace("This", "That")); // This 🐢 is a good 🐢!
console.log(txt.replace("🐢", "πŸ•β€πŸ¦Ί")); // This πŸ•β€πŸ¦Ί is a good 🐢!
Enter fullscreen mode Exit fullscreen mode

To do a case insensitive replace or to replace all matches, you could use regex:

const txt = "This 🐢 is a good 🐢!";
console.log(txt.replace(/THIS/i, "That")); // That 🐢 is a good 🐢!
console.log(txt.replace(/🐢/g, "🐩")); // This 🐩 is a good 🐩!
Enter fullscreen mode Exit fullscreen mode

Case conversion

To convert a string to uppercase or lowercase you can use toUpperCase and toLowerCase respectively:

const txt = "What's up bro!";
console.log(txt.toLowerCase()); // what's up bro!
console.log(txt.toUpperCase()); // WHAT'S UP BRO!
Enter fullscreen mode Exit fullscreen mode

We also have toLocaleLowerCase and toLocaleUpperCase methods to convert according to user's current locale:

const dotted = 'Δ°stanbul';
console.log(`EN-US: ${dotted.toLocaleLowerCase('en-US')}`); // "i̇stanbul"
console.log(`TR: ${dotted.toLocaleLowerCase('tr')}`); // "Δ°STANBUL"
Enter fullscreen mode Exit fullscreen mode

Concatenation

You can use concat to join two strings together (like + operator):

let message = "Hello" + " " + "World!";
console.log(message); // Hello World!
message = "Hello".concat(" ", "World!");
console.log(message); // Hello World!
Enter fullscreen mode Exit fullscreen mode

Trimming and padding

trim

To remove whitespace from both sides of a string value, you can use the trim function:

let message = "     Hello World!     ";
console.log(message.trim()); // "Hello World!"
Enter fullscreen mode Exit fullscreen mode

πŸ’‘ Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.).

padStart

The padStart method adds a given string at the start of the original string (multiple times, if needed), until the resulting string reaches the given length.

const str1 = '5';
console.log(str1.padStart(6, '0')); // 000005
Enter fullscreen mode Exit fullscreen mode

padEnd

The opposite of padStart is the padEnd.

const txt = 'OMG Jam';
console.log(txt.padEnd(25, '.')); // OMG Jam..................
console.log('OMG Jam'.padEnd(10)); // "OMG Jam   "
Enter fullscreen mode Exit fullscreen mode

Getting the string value

There are two methods where you can get the value of a string in JavaScript. You might say, Yas are you crazy, we already have the value in the variable. But remember that I said JavaScript treats a string variable as an object under the hood, so these methods come from the Object.prototype.

valueOf

The valueOf returns the primitive value of an object. For string values, JavaScript does it for you under the hood whenever you invoke a method which needs the primitive value. But you can also call this method to get it:

const txt = "Yas";
console.log(txt.valueOf()); // "Yas"
Enter fullscreen mode Exit fullscreen mode

toString

Similar to the above method, toString is used to return the value of a string.

const stringObj = new String('Yas');
console.log(stringObj); // StringΒ {"Yas"}

console.log(stringObj.toString()); // "Yas"
Enter fullscreen mode Exit fullscreen mode

repeat

This method is my personal favourite. You can pass a number to the repeat method and it returns your string repeated by that number. It's really good if you want to have some long text generated for testing purposes:

const txt = "Lorem ipsum faked,";
console.log(txt.repeat(5)); // Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,
Enter fullscreen mode Exit fullscreen mode

Character methods

charAt

The charAt returns a new string consisting of the single UTF-16 code unit which is located at the index specified:

const txt = "There is Jam in JamStack!";
const index = 4;
console.log(`The character at index ${index} is ${txt.charAt(index)}`); // "The character at index 4 is e"
Enter fullscreen mode Exit fullscreen mode

charCodeAt

The charCodeAt returns an integer between 0 and 65535 representing the UTF-16 code unit at the given index:

const txt = "There is Jam in JamStack!";
const index = 4;
console.log(`The character code at index ${index} is ${txt.charCodeAt(index)}`); //The character code at index 4 is 101
Enter fullscreen mode Exit fullscreen mode

codePointAt

The codePointAt method returns a non negative integer representing the Unicode point value of the specified index:

const icons = 'β˜ƒβ˜…β™²';
console.log(icons.codePointAt(1)); // "9733" 
'\uD800\uDC00'.codePointAt(0)  // 65536
Enter fullscreen mode Exit fullscreen mode

normalize

And last, but not least, the normalize method returns the Unicode normalisation form of a string:

const myAlias = '\u0059\u0061\u0073\u0068\u0069\u006e\u0074\u0073';
console.log(`${myAlias}`); // Yashints
Enter fullscreen mode Exit fullscreen mode

Summary

Hope you enjoyed reading this and learnt a few tricks which could help you at what you do day to day. And let's finish this article with a joke:

What do you call it when Wilhelm II makes a string of bad puns? πŸ‘‰πŸ½
A Kaiser roll

Top comments (2)

Collapse
 
letharpi profile image
Mumumu....

Nice article, but I see is wrong output, on the Character Method section.

console.log(`The character at index ${index} is ${txt.charAt(index)}`); 
// "The character at index 4 is r",
//  should be 
// "The character at index 4 is e" 
Collapse
 
yashints profile image
Yaser Adel Mehraban Author

Thanks for pointing that out, fixed

Classic DEV Post from 2020:

js visualized

πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

Happy coding!