An Introduction to Strings in JavaScript

A string in JavaScript, as is the case in many other programming languages, is a data type that holds data in text form. A common use for strings in the context of a web application is holding a user’s input from a form. Taking an example of a search form, the search query is stored as a string.

Once the user input is submitted in our search form, some comparative operations are performed on the submitted string. This is to find the matching credentials and return the results to the user. Comparative operations are JavaScript operators, i.e. ‘=’, ‘==’, ‘===’, ‘<’, ‘>’, to name a few. These operators return a true or false value after comparing the values held by a string.

This article focuses on the equality operators for strings. This guide goes deeper on JavaScript operators in general.

What is a JavaScript String?

A string in JavaScript is one of many native data types. It holds values represented as text and can be constructed a few different ways. The first way is known as a string primitive. This consists of storing a string literal in a variable.

const stringPrim1 = 'Hello World!'
const stringPrim2 = "Hello World!"
const stringPrim3 = `Hello World!`

A string literal can be wrapped in single quotes (‘’), double quotes (“”), or backticks (“). Know that a JavaScript string can only be interpolated by using backticks. String interpolation embeds an expression in a string.

const name = "John"
console.log(`Hello World! My name is ${name}`)

log: "Hello World! My name is John"

We have a variable storing a string with a value of “John” in this example. By using backticks, we can use the JavaScript string interpolation method. We can reference the value of name in an abstract way.

This is only one way to accomplish string interpolation in JavaScript. If you want to learn more ways, this guide is a good place to start.

Using Comparative Operators on JavaScript Strings

We need to disregard case sensitivity in our strings for a search form to be effective. It would be tedious for our users if their input had to exactly match the values stored in our database. JavaScript provides a work around with the toUpperCase() and toLowerCase() methods.

Let’s search for cute kitten videos on a video web app. 

const userInput = 'kittens'
const searchResult = 'Kittens'

console.log(userInput == searchResult)
log: false

This way of programming a comparative search would yield no results. We know that the internet is full of kitten videos, so let’s disregard case sensitivity and return the results the user meant to search for.

const userInput = 'kittens'
const searchResult = 'Kittens'

console.log(userInput.toUpperCase() === searchResult.toUpperCase())
log: true

Now that we have converted both strings to be all uppercase letters after input, we can return the accurate search results. The same result can be accomplished by converting both strings to all lowercase letters.

const userInput = 'kittens'
const searchResult = 'Kittens'

console.log(userInput.toLowerCase() === searchResult.toLowerCase())
log: true

This example is meant to show the comparative logic behind how a search form may be written. There are many more methods and operators available for JavaScript strings and can be found here.

Conclusion

In this introduction to JavaScript strings, we have briefly discussed what a string is and a few ways to work with them. The subject of strings in JavaScript is a broad one. Understanding what a string is can be a simple task, yet the included methods to work with strings is extensive.

After understanding the concepts in this article, using the above guide to further explore string methods will make more sense. JavaScript strings are essential data types to understand in order to make dynamic, robust web apps.