DEV Community

Cover image for JavaScript Tutorial Series: Strings
The daily developer
The daily developer

Posted on • Updated on

JavaScript Tutorial Series: Strings

In this post we're going to talk about strings.

What is a string ?

A string is a series of characters wrapped with single or double quotes.

let name = "John";
let favoriteColor = 'green';
let work = "developer";
Enter fullscreen mode Exit fullscreen mode

Single quotes can be used inside a double quoted string.

let sentence = "I am 'John'";
Enter fullscreen mode Exit fullscreen mode

Escape Character

Using double quotes inside a double quoted string will result in a "Syntax error" which happens when trying to interpret a syntactically incorrect code. This issue can be resolved using the escape character.

The escape character is the \ backslash character which converts special characters into string characters.

characters result description
\' ' escaping a single quote
\" " escaping double quote
\ \ escaping a backslash
\n gives you a new line
\t gives you a tab space
let greeting = "Hi I am \"John Doe\"";
let whatDayIsIt = 'It\'s sunday';
let sentence = "Hi I am \\John Doe";
Enter fullscreen mode Exit fullscreen mode

Concatenating strings

Using the + operator we can concatenate multiple strings together.

let str = "This is the first string. " + "This is the second string.";
Enter fullscreen mode Exit fullscreen mode

Try this code out.

let greeting ="Hello";
let space =" ";
let introduceYourself = "I'm John Doe";
let sentence = greeting + space + introduceYourself;

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

We can also concatenate strings strings using the shorthand we've learned for adding variables together.

let greeting ="Hello";
let space =" ";
let introduceYourself = "I'm John Doe";

let sentence ="";
sentence+=greeting;
sentence+=space;
sentence+=introduceYourself;

console.log(sentence); 

Enter fullscreen mode Exit fullscreen mode

String immutability

Strings are immutable but can be reassigned meaning it cannot be changed after being created.

We can also access a string's characters by using bracket notation. Let's use the example "I am a string". Let's say we want to know the position of the "m" in that string. This position is called index you count indexes starting from 0 (zero based indexing). Can you guess what is the index of "m" ?

let text= "I am a string";
let indexOfM = text[3];
console.log(indexOfM); //m
Enter fullscreen mode Exit fullscreen mode

To understand better how strings are immutable let us take "I am Job" as an example.

Looks like we misspelled "Bob" and wrote "Job". Using our previously acquired knowledge could we fix that spelling mistake? you might think that we can using the bracket notation.

let text= "I am Job";
text[5]= "B";
Enter fullscreen mode Exit fullscreen mode

This does not work but we can reassign the string and which is the way to fix the typo.

let text= "I am Job";
text =  "I am Bob";
Enter fullscreen mode Exit fullscreen mode

String length

You can find a string's length by using the built-in property length.

let text = "I am a string";
let textLen = text.length;
console.log(textLen);//13 (spaces are also counted)
Enter fullscreen mode Exit fullscreen mode

Find last character of a string

As we've seen we can get the length of a string using the length property. The length property starts counting from 1.

Let's keep in mind that indexing starts from 0 and length starts from 1. The length of a string is the number of characters in it. The index is the position of any character within the string.

This means a string of length 13 has 0-12 characters. The last index is always 1 less than the length.

let text = "I am a string";
let lastChar = text[text.length-1];
console.log(lastChar); //g
Enter fullscreen mode Exit fullscreen mode

Let's explain this bit text[text.length-1]. let's start with the brackets [text.length-1].

  • text.length is 13

  • 13-1 is 12.

  • text[12] is the last character of the string found in the variable text.

*Find the fifth to last character in the text string using [text.length-x] *

Top comments (0)