Javascript Strings Basics

Creating a string in JavaScript can be done using double quotes or single quotes

let myString = 'This is my string';
let myOtherString = "This is my string too";

There is no difference between using single or double quotes however you may get some different opinions on why each is better.

Javascript String Properties

.length is a string property that returns the length of a string. Properties describe an object and in this case describe out string.

let myString = 'bottle';
myString.length;  // 6

Javascript String Methods

Strings also have methods that can be called on string

.includes(), .toUpperCase(), and .toLowerCase() as commonly used string methods in JavaScript.

Methods or functions require parenthesis .toLowerCase() because they are actions performed on objects. For strings, .length is already computed so it doesn't need the parenthesis but .toLowerCase() does because it is an action on the string object.

Commonly Used Javascript String Methods and Examples


let myString = 'This is my string';
myString.includes('my') // true
myString.includes('yours') // false

.toUpperCase() and .toLowerCase()

let myString = 'This Is My String';
myString.toUpperCase() // THIS IS MY STRING
myString.toLowerCase() // this is my string

Javascript Substrings and Accessing Characters

To get a single character from a string, use square brackets []. Strings are 0-indexed meaning that when counting the position of characters you start at 0, not 1.

let myString = 'This Is My String';
myString[0]  // T
myString[1]  // h
myString[2]  // i

We can use the .length property of string to help access characters. For example if you wanted to access the last character of a string:

let myString = 'This Is My String';
myString[myString - 1]  // g
Javascript Substrings

A substring is a part of a string: If 'substring' is a string, 'sub' is a substring to 'substring' (say that fast 5 times).

Instead of accessing each character of the substring you want, you can use the function .substring(indexStart, indexEnd) to help you.

let myString = 'This Is My String';
myString.substring(1, 3) // his
myString.substring(myString.length - 3, myString.length - 1) // ing

indexEnd is an optional parameter of .substring() meaning that it is not required to call the function on a string

let myString = 'This Is My String';
myString.substring(myString.length - 3) // ing
myString.substring(myString.length - 6) // String

.startsWith() .endsWith()

.startsWith() and .endsWith() are also useful functions for substrings. The names are self explanatory but just in case... they check if a string starts or ends with a specific substring.

let myString = 'This Is My String';
myString.startsWith('This') // true
myString.startsWith('his') // false

myString.endsWith('Str') // false
myString.endsWith('String') // true

Sometimes we get nasty string that have unexpected spaces at the start or end. .trim() removed additional white spaces from the beginning, end, or both!

let myString = '  This Is My String  ';
let myOtherString = '  This Is My Other String';
myString.trim()  // `This Is My String`
myOtherString.trim() // `This Is My Other String`

Javascript String Concatenation

You can easily combine strings in JavaScript with the (plus) sign, +. Concatenation just means merging or combining the strings.

let myString = 'This is ';
let otherString = 'My String';
myString + otherString // 'This Is My String'

Template Strings and Multiline Strings in Javascript

Fun fact: Interpolation is fancy coder speak for inserting something into something else. Its also something that normal Javascript strings cannot do. Template Strings however, can, and that is why we use them!

You can create a template string by using backticks, ` , instead of single or double quotes.

let languageOne = 'Python';
let languageTwo = 'JavaScript';
'${languageOne} is different than ${languageTwo}' // Python is different than JavaScript

Normal strings in Javascript don't allow for multiline strings, template strings do

`Look I'm on