[6] Strings in JavaScript - Words!

We learned about the number data type in programming. Most would assume programming had at least a little to do with math. But how do we work with words? We see text all the time when we interact with a peice of software. We are seeing it right now on this page.

Most programming languages have built in features to work with text as data fairly naturally. JavaScript if one of those many languages that lets us work with text naturally.

In JS (and most other languages) the data type of text is known as the string type. The syntax around it is very simple:

let thingIWantToSay = "Hello World"
console.log(thingIWantToSay) // outputs => Hello World

You can see here that we created the variable thingIWantToSay with the value of Hello World. Simply wrapping our text in a set of quotations " " tells JavaScript that this is a string.

Also be aware that there are a few different ways to do this:

let firstString = "Hello World" // using set of double qoute marks
let secondString = 'Hello World' // using set of single quite marks
let thirdString = `Hello World` // using set of back ticks

All three of these syntax forms will create a valid string.

The syntax of firstString and secondString are often used interchangably depending on the style of the developer. One of the most common styles is to define strings as done with secondString; using a set of single quote marks ' '.

An example of why you my choose the syntax of either firstString or secondString might look like this:

let quoteOfSomeone = 'President Lincoln said "Four score and seventy years ago" at the Gettysburg Address'

// Using single quotes to define the string allows us to have the double quotes inside to be a part of the textual value

let itemOfSomeone = "Jack's phone"

// Using double quotes to define the string allows us to have the single quotation mark inside the string to be a part of the textual value

Although allowed and valid, the syntax  of thirdString is unofficially reserved for something in JS called a template literal. Which we will cover in another article.

Moving forward in these articles, I will be sticking to the style of single quotation marks whereever possible.

String Features

Just like how we saw how to use operators and math methods with numbers, we have some fancy tools in JS that allow us to manipulate strings as well. You can check out an exaustive list and descriptions here: https://www.w3schools.com/js/js_string_methods.asp

We will however go over a few examples to become familiar with the possibilities.

Firstly we can actually use the addition + operator that we used when performing math with numbers. In our examples going forward, lets work with the theme of street addresses.

let streetName = 'Jefferson'
let streetType = 'Ave'

let fullStreetName = streetName + streetType
console.log(fullStreetName) // JeffersonAve

Above we took two strings and joined them together with the + operator. Since our data types are strings JS knows that we are not trying to perform math, so it just litterally sticks these to textual values beside each other into a single value, i.e. fullStreetName.

Also notice that the value that logged out was simply JeffersonAve with no space dividing the text. This is because computers are extremely stupid and can only do exactly what you tell them, without making any assumptions.

If something doesnt look right, then it is probably your own logical fault in the code and not an error on the computer's part.

To fix this we can sinply make sure to add a space somewhere in our strings:

let fullStreetName = streetName + ' ' + streetType

I opted to insert a string value of just a space character when adding the two variables together. This would be better than adding a space into one of the actual variables like: let streetName = "Jefferson ".

let streetNumber = 1240
let streetName = 'Jefferson'
let streetType = 'Ave'

let fullStreetName = streetNumber + ' ' + streetName + ' ' + streetType 
console.log(fullStreetName) // 1240 Jefferson Ave

Notice that the variable streetNumber is not actually of type string but of type number, yet we were able to join it into our string value fullStreetName.

Remember that part where I said computers are stupid and only do exactly what you tell them? Well thats still true but in this case JavaSccript is making an assumption for you. JS is assuming that since you are adding this number to a `string` then you must actually want to treat this number as a string type.

That is about where the assumptions end however.  Let's look at the below example  of strings and numbers to clear up some confusion.

let stringOfThree = "3"
let numberOfFive = 5
let numberOfTen = 10

console.log(stringOfThree + numberOfFive) // "35" string
console.log(numberOfFive + numberOfTen) // 15 number
console.log(numberOfTen + stringOfThree) // "103" string
console.log(stringOfThree + stringOfThree) // "33" string

Even if you initial string value is a number character in quotes, it is still treated as a string. As far as JS is concerned stringOfThree = "3" is treated with the same data type  as stringOfThree = "L".

But again, if you are adding a value of number data type, then it will be treated as is it were a string. In JS stringOfThree + numberOfFive might as well be the same as "3" + "5" // returns string of "35"

There is a lot more detail we could go into about strings. And we will in upcoming articles. Regardless of those articles, i strongly advise you to follow the link listed above and get a loog at what all can be done with strings using the built in methods and properties of this data type.