Bo dinglesTM - -   Bright Lightbulb Graphic Ideas   - -

The Web Developer Bootcamp 2024

Colt Steele

Back to JavaScript Index Page


JavaScript Strings

JavaScript Strings PDF

JavaScript Strings are sequences of characters that can contain any sequence of numbers, letters and symbols. Strings are useful for holding data that can be represented in text form. Some of the most-used operations on strings are to check their length, to build and concatenate them using the + and += string operators, checking for the existence or location of substrings with the indexOf() method, or extracting substrings with the substring() method.

Strings can be created as primitives, from string literals, or as objects, using the String() constructor.

When assigning strings to variables, you must enclose them in quotes. In Javascript you can use either single quotes, or double quotes, but you can not mix different quote types (opening and closing). You can however, nest quote types within other qoute types. For example:

  • "I am a 'nested' string." is valid
  • 'I am a "nested" string.' is also valid
  • 'I am an invalid string." is not valid


Strings Are Indexed

r o c k e t s h i p
0 1 2 3 4 5 6 7 8 9

Each character has a corresponding index, a positional number, that references it's position within the string. You access individual characters in the string br referencing their positional number with square brackets. For example:

  • let word = "spaceship" : (assigns the characters to a string variable called word)
  • word[2] would be c
  • word[5] would be t
Referencing a position in the string that does not exist such as word[99], will return undefined, which is javascripts way of saying word[99] does not exist.

You can aslo reference part of a string with .substr()

  • syntax is : .substr(start, how many (optional))
  • word.substr(6) would return ship
  • word.substr(0, 4) would return rock


String Length

The length of the string, which is to say, the number of charecter in the string can be determind by string.length. So for our example:

  • word.length would be 10 (0 to 9).


String Concatenation (+)

You can concatenate or add strings together.

  • word1 = "rocket"
  • word2 = "ship"
  • word = word1 + word2 = rocketship

If you try to add a number to a string, javascript will convert the number to a string and then concatenate the strings. So,

  • variable1 = 1
  • variable2 = "rocketship"
  • variable1 + variable2 = "1rocketship" as a string.


String Methods & Properties

String Methods are built-in actions we can perform with individual strings. They can help us do things like:

  • - Searching within a string
  • - Replacing part of a string
  • - Changing part of a string
More info and a list of methods and properties can be found here.

the syntax is variable.property(or method). If you end the statement in parenthesis then you are using a method. If there are no parenthesis, the you are using a property.

  • string.length: length is a property
  • string.toUpperCase(): toUpperCase is a method

Using a Method or Property does not change the original string. Methods such as toUpperCase() create a new version of the original string.

You can also combine multiple methods and properties on one line such as: string.trim().toUpperCase(). This particular code will trim any spaces from the beginning and end of a string, and then convert the remaining text to uppercase. Once again, this does not change the original string. When you combine methods, the order of operations are from left to right, so the left most method will be applied, then the next, and so on down the line.


String Methods with Arguments

Some string methods accept arguments which allow us to modify the behaviour of them. Think of them as inputs where we can pass data into the method. We place these arguments inside of the method parenthesis.

indexOf() is an example of a method that uses arguments. indexOf() will return the first instance of the data you are trying to index. From our previous example,
let word = "rocketship";

  • word.indexOf('ship') would return 6 because that is the index # that the string "ship" starts at
  • word.indexOf('rock') would return 0
  • and word.indexOf('z') would return -1 because the argument z was not found in the string

If for example our variable word was equal to rocketshiprocket, word.indexOf('rock') would still return a 0 because this method only returns the first instance of the argument.


String Template Literals

String Template Literals are like a shortcut for creating a string with a combination of text and expresions. String Literals MUST be enclosed in back tickmarks. Back Tickmarks are the reverse apostraphe key normally located right above the TAB key on a US keyboard.

The way it works is the string (text) part goes inside the back ticks ``, and the expresions go inside curly braces {} with a leading dollar sign ${}.

Example, let's say:

  • let item = "pickles";
  • let price = 1.25;
  • let qty = 5;

We could say : "You bought " + qty + " " + item + " for $" + price + "each. Your Total is: $" + qty * price + "."

and the output would be: "You bought 5 pickles for $1.25 each. Your Total is: $6.25.

We could simplify this by using String Template Literals, like this:
`You bought ${qty} ${item} for $${price} each. Your Total is: $${qty * price}.` which would ouput the same thing.

String Template Literals simplify the coding, perform the math, and convert everything to a string output.

*sideNote: You could also include methods if you wanted to. Example:

  • `You bought ${qty} ${item.toUpperCase()} for $${price} each. Your Total is: $${qty * price}.`
  • would output
  • You bought 5 PICKLES for $1.25 each. Your Total is: $6.25.


Back to Top