Think a string of pearls

Or a string of ponies

But with characters rather than pearls or ponies.

Where characters are letters, numbers, punctuation, spaces, etc.

Strings are yet another kind of value

So we can ask our usual questons

What values can be represented?

Basically any text (letters, numbers, etc.)

There is a limit on the length: 2⁵³ - 1.

And can only represent characters in the Unicode character set.

(More on Unicode later.)

How do we write strings?

Two ways to write literal strings.

"foo"

'foo'

Note that the quotation marks are not part of the string.

Both "foo" and 'foo' are three characters long.

They also represent the same value despite being written differently.

Escapes

Sometimes we need to include characters in a string that aren’t part of the syntax.

For instance a literal string has to be written on one line but text can contain line breaks.

Thus we need a way to escape from the normal syntax.

'foo\nbar'

This string is seven characters long and does not contain an ‘n’.

The two characters \n in the syntax represent a single “newline” character in the value.

Sadly escaping begets more escaping

What if we want to write a string containing a \?

Now we need to escape the \.

'foo\\nbar'

This string is eight characters long.

The \\ represents a single \ character and the n is just an n.

What can we do with strings?

• Smoosh them together

• Take them apart

The + operator works on strings

Also known as “concatenation”

» 'foo' + 'bar'

'foobar'

⚠️ Watch out though ⚠️

When asked to add different types of values, and one of them is a string, Javascript will convert the other one to a string and then concatenate them.

» 1 + '0'

'10'

But the other arithmetic operators will convert strings to numbers in mixed expressions.

» 1 * '0'

0

What can I say?

Javascript is messy.

Taking apart strings

[] operator

The “index” operator.

Allows us to select a single character out of a string.

Unlike operators like + and *, it doesn’t go between its operands.

Also its operands are not the same type.

string[index]

The string operand is a string.

The index operand is a number.

Expression evaluates to a one-character string.

Note: indexes start at 0

The index of the first character is 0.

This is called a zero-based index.

Programmers like counting from zero.

You'll get used to it.

» 'abc'[0]

'a'

» 'abc'[1]

'b'

» 'abc'[2]

'c'

The length property

Some values in Javascript have “properties” that hold other values.

Strings have a length property that says how long they are.

Properties are accessed with a . and the name of the property.

» 'foobar'.length

6

Valid indices for a string s

If the index of the first character is 0 what is the last valid index?

s.length - 1

Methods preview

Some values in Javascript have special properties called “methods”.

Methods are bits of functionality attached to the value.

value.methodName(arguments)

substring method

Sometimes we want to extract a bigger chunk of a string than a single character.

Strings have a substring method for this.

Extracts a substring

From a starting index (inclusive) to an end index (exclusive)

s.substring(start index, end index)

or

s.substring(start index)

Second argument is implicitly s.length.

s = 'foobar'

» s.substring(0)

'foobar'

» s.substring(1)

'oobar'

» s.substring(s.length - 1)

'r'

» s.substring(s.length)

''

» s.substring(0, 3)

'foo'

» s.substring(3)

'bar'

» s.substring(3, s.length)

'bar'

💩 A warning about emoji 💩

I mentioned earlier that strings can only contain “Unicode” characters.

Good news is Unicode was designed to encompass almost all characters used in human languges, past and present.

🎉 That includes emoji. 🎉

Unfortunately …

Characters are just numbers.

And strings are lists of numbers.

Emoji are represented by bigger numbers than “normal” characters.

So emoji (and some other characters) actually take up two spots in a string.

» '😀😀😀'.length

6

» '😀😀😀'[0]

'\uD83D'

wtf?!

That \uD83D is another escape, this time representing the first half of the number representing the 😀 emoji.

This can happen with characters other than emoji but probably not ones you are likely to use unless you are also studying archaic languages or using extremely obscure Chinese characters.

Some other useful String methods

» 'foo'.toUpperCase()

'FOO'

» 'FOO'.toLowerCase()

'foo'

f = 'foo'

f[0].toUpperCase() + f.substring(1)
'Foo'

Try it yourself

https://intro.gigamonkeys.com/expressions/strings/

Up next

Expressions