{"componentChunkName":"component---src-templates-tags-js","path":"/tags/string/","result":{"data":{"allMarkdownRemark":{"totalCount":1,"edges":[{"node":{"id":"3fabe53b-b745-5c26-8ed8-75d0debab547","html":"

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.

\n\n

Introduction

\n

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.

\n

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

\n

String length

\n

The length property returns the length of a string:

\n\n \n Copy\n \n \n
const alphabet = \"ABCDEFGHIJKLMNOPQRSTUVWXYZ\";\r\nconsole.log(alphabet.length); // 26
\n

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:

\n`, `86995251580721870000`)\"\n >\n \n Copy\n \n \n
<?php\r\necho strlen(\"ABCDEFGHIJKLMNOPQRSTUVWXYZ\");\r\n?>
\n

Finding a text in string

\n

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:

\n

indexOf

\n

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

\n\n \n Copy\n \n \n
const txt = \"Can you find Yas in 'dryasdust'?\";\r\nconsole.log(txt.indexOf('yas')); // 23
\n

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

\n\n \n Copy\n \n \n
const txt = \"Can you find Yas in 'dryasdust'?\";\r\nconsole.log(txt.indexOf('Yas')); // 13
\n

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

\n\n \n Copy\n \n \n
const txt = \"There is no 0 in 11\";\r\nconsole.log(txt.indexOf('zero')); // -1
\n

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

\n\n \n Copy\n \n \n
const txt = \"We have SQL and no-SQL databases!\";\r\nconsole.log(txt.indexOf('SQl', 10)); // 19
\n

lastIndexOf

\n

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

\n\n \n Copy\n \n \n
const txt = \"Can you find Jam in 'JamStack'?\";\r\nconsole.log(txt.indexOf('Jam')); // 21
\n

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:

\n\n \n Copy\n \n \n
const txt = \"Can you find Jam in 'JamStack'?\";\r\nconsole.log(txt.lastIndexOf('Jam', 6)); // -1
\n

search

\n

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

\n\n \n Copy\n \n \n
const txt = \"Can you find Jam in 'JamStack'?\";\r\nconsole.log(txt.search('Jam')); // 13
\n

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

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

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:

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(str.search(/jam/i)); // 9\r\n\r\nconsole.log(txt.indexOf('jam')); // -1
\n

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

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.search(/[^\\w\\s]/g)); // 24
\n

endsWith

\n

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

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.endsWith(\"Stack!\")); // true
\n
\n

💡 This method is case sensitive.

\n
\n

startsWith

\n

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

\n\n \n Copy\n \n \n
const txt = \"JamStack's got Jam\";\r\nconsole.log(txt.startsWith(\"JamStack\")); // true
\n

includes

\n

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

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.includes(\"in\")); // true\r\nconsole.log(txt.includes(\"Jam\")); // true\r\nconsole.log(txt.includes(\"jam\")); // false
\n

localeCompare

\n

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:

\n\n \n Copy\n \n \n
const a = 'réservé'; \r\nconst b = 'RESERVE';\r\nconsole.log(a.localeCompare(b)); // 1\r\nconsole.log(a.localeCompare(b, 'en', { sensitivity: 'base' })); // 0
\n

Extracting sub-strings

\n

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

\n

slice

\n

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

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.slice(9, 12)); // Jam
\n

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

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.slice(-16, -13)); // Jam
\n

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

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.slice(16)); // JamStack!
\n

substring

\n

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

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.substring(16)); // JamStack!\r\nconsole.log(txt.substring(9, 12)); // Jam
\n

substr

\n

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:

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.substr(9, 3)); // Jam
\n

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:

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.substr(-9)); // JamStack!
\n

split

\n

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:

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconst words = txt.split(' ');\r\nconsole.log(words[4]); // JamStack!
\n

A few points regarding this method:

\n
    \n
  • 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\").
    • \n
  • If the separator contains multiple characters, that entire string needs to be found.
    • \n
  • If the separator cannot be found, the return value is an array with one element containing the whole string.
    • \n
  • 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.
    • \n
  • If you pass an empty string \" as the separator, it splits the string into single UTF-16 characters.
    • \n
\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconsole.log(txt.split('Jam')); // [\"There is \", \" in \", \"Stack!\"]\r\nconsole.log(txt.split('test')); // [\"There is Jam in JamStack!\"]\r\nconsole.log(txt.split('There')); // [\"\", \" is Jam in JamStack!\"]\r\nconsole.log(txt.split('')); // [\"T\", \"h\", \"e\", \"r\", \"e\", \" \", \"i\", \"s\", \" \", \"J\", \"a\", \"m\", \" \", \"i\", \"n\", \" \", \"J\", \"a\", \"m\", \"S\", \"t\", \"a\", \"c\", \"k\", \"!\"]
\n

Replacing string content

\n

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

\n\n \n Copy\n \n \n
const txt = \"Who's awesome!\";\r\nconsole.log(txt.replace(\"Who's\", \"You're\")); // You're awesome!
\n
\n

💡 This method doesn’t change the original string, it returns a new one.

\n
\n

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

\n\n \n Copy\n \n \n
const txt = \"This 🐶 is a good 🐶!\";\r\nconsole.log(txt.replace(\"This\", \"That\")); // This 🐶 is a good 🐶!\r\nconsole.log(txt.replace(\"🐶\", \"🐕‍🦺\")); // This 🐕‍🦺 is a good 🐶!
\n

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

\n\n \n Copy\n \n \n
const txt = \"This 🐶 is a good 🐶!\";\r\nconsole.log(txt.replace(/THIS/i, \"That\")); // That 🐶 is a good 🐶!\r\nconsole.log(txt.replace(/🐶/g, \"🐩\")); // This 🐩 is a good 🐩!
\n

Case conversion

\n

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

\n\n \n Copy\n \n \n
const txt = \"What's up bro!\";\r\nconsole.log(txt.toLowerCase()); // what's up bro!\r\nconsole.log(txt.toUpperCase()); // WHAT'S UP BRO!
\n

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

\n\n \n Copy\n \n \n
const dotted = 'İstanbul';\r\nconsole.log(`EN-US: ${dotted.toLocaleLowerCase('en-US')}`); // \"i̇stanbul\"\r\nconsole.log(`TR: ${dotted.toLocaleLowerCase('tr')}`); // \"İSTANBUL\"
\n

Concatenation

\n

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

\n\n \n Copy\n \n \n
let message = \"Hello\" + \" \" + \"World!\";\r\nconsole.log(message); // Hello World!\r\nmessage = \"Hello\".concat(\" \", \"World!\");\r\nconsole.log(message); // Hello World!
\n

Trimming and padding

\n

trim

\n

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

\n\n \n Copy\n \n \n
let message = \"     Hello World!     \";\r\nconsole.log(message.trim()); // \"Hello World!\"
\n
\n

💡 Whitespace in this context is all the whitespace characters (space, tab, no-break space, etc.).

\n
\n

padStart

\n

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.

\n\n \n Copy\n \n \n
const str1 = '5';\r\nconsole.log(str1.padStart(6, '0')); // 000005
\n

padEnd

\n

The opposite of padStart is the padEnd.

\n\n \n Copy\n \n \n
const txt = 'OMG Jam';\r\nconsole.log(txt.padEnd(25, '.')); // OMG Jam..................\r\nconsole.log('OMG Jam'.padEnd(10)); // \"OMG Jam   \"
\n

Getting the string value

\n

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.

\n

valueOf

\n

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:

\n\n \n Copy\n \n \n
const txt = \"Yas\";\r\nconsole.log(txt.valueOf()); // \"Yas\"
\n

toString

\n

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

\n\n \n Copy\n \n \n
const stringObj = new String('Yas');\r\nconsole.log(stringObj); // String {\"Yas\"}\r\n\r\nconsole.log(stringObj.toString()); // \"Yas\"
\n

repeat

\n

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:

\n\n \n Copy\n \n \n
const txt = \"Lorem ipsum faked,\";\r\nconsole.log(txt.repeat(5)); // Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,Lorem ipsum faked,
\n

Character methods

\n

charAt

\n

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

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconst index = 4;\r\nconsole.log(`The character at index ${index} is ${txt.charAt(index)}`); // \"The character at index 4 is r\"
\n

charCodeAt

\n

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

\n\n \n Copy\n \n \n
const txt = \"There is Jam in JamStack!\";\r\nconst index = 4;\r\nconsole.log(`The character code at index ${index} is ${txt.charCodeAt(index)}`); //The character code at index 4 is 101
\n

codePointAt

\n

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

\n\n \n Copy\n \n \n
const icons = '☃★♲';\r\nconsole.log(icons.codePointAt(1)); // \"9733\" \r\n'\\uD800\\uDC00'.codePointAt(0)  // 65536
\n

normalize

\n

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

\n\n \n Copy\n \n \n
const myAlias = '\\u0059\\u0061\\u0073\\u0068\\u0069\\u006e\\u0074\\u0073';\r\nconsole.log(`${myAlias}`); // Yashints
\n

Summary

\n

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:

\n
\n

What do you call it when Wilhelm II makes a string of bad puns? 👉🏽

\n
\n

A Kaiser roll

","timeToRead":8,"frontmatter":{"title":"All you need to know about string in JavaScript 🧵","unformattedDate":"2020-05-11T00:00:00.000Z","date":"May 11, 2020","path":"/string/","author":"Yaser Adel Mehraban","tags":["showdev","webdev","javascript","string"],"thumbnail":null}}}]}},"pageContext":{"tag":"string"}},"staticQueryHashes":[],"slicesMap":{}}