JavaScript data type: Strings

Syntax

Here are 4 different methods to create a string.

// Single quotes
const guyName = 'John';

// Double quotes
const girlName = "Jenny";

// Backtick quotes
const babyName = `Jo`;

// String constructor
const foo = new String('bar');

The first 3 examples single, double, and backtick quotes are called template literals.

The 4th example is known as a string object. All template literals get converted to string objects by JavaScript.

Since JavaScript converts template literals to objects, it gives us access to handy string features that will be discussed further down in this article.

Even though template literals get converted to string objects, you shouldn't create new string variables like method #4.

Which template literal to use

If your code doesn't need to support IE browsers, use backtick quotes.

Escape strings

Sometimes strings need to have quotes, for example:

So Dorothy said, "she crazy!"

Because strings must be written inside quotes, and having quotes inside quotes will confuse JavaScript.

The solution to this problem is to use the backslash (\).

const sentence = "So Dorothy said, \"she crazy!\"";

Notice how I've used the backslash before any double quote that is within the string. The same goes for single quotes.

const sentence = 'You\'re so funny!';

Sometimes it's nicer to read shorten forms of words than the longer versions.

These are one of the benefits of using backticks. You don't have to worry about escaping characters.

const sentence1 = `So Dorothy said, "she crazy!"`;
const sentence2 = `You're so funny!`;

Creating multiple lines

Sometimes your strings are way too long, and you need a way to break it into a new line.

This is where adding a backslash (\) will come in handy again.

const longSentence = "Sometimes your strings are way too long, \
and you need a way to break it into a code new line.";

// sentence 1 output
"Sometimes your strings are way too long, and you need a way to break it into a new line."

const longSentence2 = "Backslash only tells JavaScript that\n"
+ "it's going to continue on a new code line\n"
+ "not that it's actually a new line on the output";

// Sentence 2 output
"Backslash only tells JavaScript that
it's going to continue on a new code line 
not that it's actually a new line on the output"

The backslash will let JavaScript know that the string will continue on a new line.

It's also important to note that there SHOULD NOT be any space after the backslash. Otherwise it will not work.

We can avoid using the backslash by just using backtick quotes.

const longSentence = `Sometimes your strings are way too long,
and you need a way to break it into a new line.
`;

Character access

If you ever need to access any of the individual characters, you have 2 methods of achieving this.

The first method is using charAt().

const petType = 'cat';

petType.charAt(2); // Returns "t"

Note: Accessing the array of characters always starts at 0.

Another method is to use brackets ([]) and the index number.

const petType = 'cat';

petType[0]; // Returns "c"

Either method is valid, but most engineers just use the bracket method.

Combine strings together

Sometimes you want to join two string variables to make 1.

You can always use the concat() string method.

const fullName = 'John';

fullName.concat(' Doe'); // Return John Doe

Even though that's a valid method, it's not recommended to use concat() for performance reasons. You should always use + or += operators.

const name = 'Mary';

const age = '25';

const greetMessage = "Hi there! My name is " + name; // Hi there! My name is Mary

greetMessage += ", and I'm " + age + " years old."; // Hi there! My name is Mary, and I'm 25 years old.

String methods

Here are a few methods and properties that are helpful to manipulate strings.

Get the length of string

The length property returns the length of the string.

const name = 'Mary Jane';

name.length // 9

If you count the number of letters, it's only 8 letters but in the code example above it says 9.

That's because spaces count as characters as well.

Replace a character in a string

The replace() returns a new string with some or all matches with the replacement.

replace(pattern, new_value);

Since this method returns a new string, and not modify the current string, you must attach it to a new variable.

const sentence = "I'm a cat lover!";

const newSentence = sentence.replace('cat', 'dog'); // I'm a dog lover!

In the example above, I said to replace the word cat to dog.

Does it include

includes() is a handy method utility checks if a string pattern is found in another string.

This method will return a boolean result.

const sentence = 'The red fox jumped over the picnic table.';

const word = 'dog';

sentence.includes('fox'); // true
sentence.includes(word); // false