The String is by far one of the most used type in JavaScript.

There are programming languages that differ “chars” from “strings”. But in JavaScript, there are only strings, no chars. That really makes life simpler.

Another feature is that internally all strings are unicode, no matter which encoding is used.

String creation

String objects are usually created using string literals:

var text = "my value";
var anotherText = 'another string';
var str = "012345";

There is no difference between single and double quote in JavaScript.

String literals may contain special characters denoted by escape-sequences, a newline symbol and others.

Special characters

Here is a list of special characters and sequences:

Note that strings in JavaScript are Unicode internally.

The newline symbol is by far the most popular:

var multiLine = " first \n second \n third line "
alert(multiLine) // alerts 3 lines

Escaping, special chars

An escaping is prepending a character by backslash ‘'.

First, if single quotes appear inside a single-quoted string, they need to be escaped:

var str = '*!*I\'m*/!* the Valrus'

In this particular case the double-quoted string could work also:

var str = "I'm the Valrus"  // no need escaping.

The same applies to double quotes. Escaping is required for double quotes inside a double-quoted string:

var str = " double \" quote "

Backslash symbol ‘' has to be escaped always:

var str = " '\\' "

alert(str) // '\'

Methods and properties

There are many properties in JavaScript strings. Let’s discuss the most important ones first.

Length

Every string has a length (a number of unicode symbols).

var str = "My\n" // 3 characters. The third symbol is newline

alert(str.length)  // 3

Accessing characters

To access a single character, use charAt call. First character starts at 0:

var str = "catty"
alert( str.charAt(0) )  // "c"

There is no “character” type in JavaScript, so charAt actually returns a substring containing exactly one symbol.

var str = "I'm the modern browser!" 
alert(str[0])  // "I"

Manipulating strings

A string cannot be changed in JavaScript. You can read a character, but you can’t replace it.

The usual workaround is to change a string variable: create a new string and reassign it instead of the old one, like in the example below:

var str = "string"

str = str.charAt(2) + str.charAt(3) + str.charAt(4) + str.charAt(5)

alert(str) // ring

In this example str.charAt(2), charAt(3)... calls get characters on given positions and operator "+" performs concatination (joining) of them.

Lowercasing / Uppercasing

Methods toLowerCase() and toUpperCase() change the case of a whole string:

alert( "Hey-ho!".toUpperCase() )

The following code gets the first char and lowercases it.

alert( "Hey-ho!".charAt(0).toLowerCase() )

ucFirst("john") == "John"

function ucFirst(str) {
  var newStr = str.charAt(0).toUpperCase()

  for(var i=1; i<str.length; i++) {
    newStr += str.charAt(i)
  }

  return newStr
}

alert( ucFirst("john") )

Finding a substring

To find a substring, there exists an indexOf method.

It returns the position of a first occurence of a substring or -1 if nothing found:

var str = "Widget with id"

alert( str.indexOf("Widget") ) // 0
alert( str.indexOf("id") ) // 1
alert( str.indexOf("Lalala") ) // -1

An optional second argument allows to search from an index.

For example, the first occurence of "id" is at index 1. So, let’s find one more:

var str = "Widget with id"

alert( str.indexOf("id", 2) ) // 12, search starts from char 2

There is also a similar method lastIndexOf which searches backwards, from the end of the string.

alert( ~-1 ) // 0

var str = "Widget"
if( ~str.indexOf("get") ) {
  alert('match!')
}

checkSpam('buy ViAgRA now') == true
checkSpam('free xxxxx') == true
checkSpam("innocent rabbit") == false

function checkSpam(str) {
  str = str.toLowerCase()
       
  return str.indexOf('viagra') >= 0 || str.indexOf('xxx') >= 0
}

Extracting a substring: substr, substring, slice.

In JavaScript, there are 3 (!) methods to extract a portion of a substring, but with minor differences.

substring(start [, end])

Method substring(start, end) extracts a substring from start to, but not including position end. The count starts from 0.

var str = "*!*s*/!*tringify"
alert(str.substring(0,1)) // "s"

If end is omited, it goes till the end of string:

var str = "st*!*ring*/!*ify"
alert(str.substring(2)) // ringify

substr(start [, length])

The first argument is same as in substring, but second argument is “how many characters to extract” instead of ending position.

var str = "st*!*ring*/!*ify"
str = str.substr(2,4) // ring
alert(str)

Again, the omitted second parameter means go till the end of string.

slice(start [, end])

Returns a portion of the string from position start to, but not including position end. That’s same as substring.

The difference between substring and slice is how they treat negative and overflow values:

substring(start, end)

Negative values become zero. Too large value becomes string length:

alert( "testme".substring(-2) )  // "testme", -2 becomes 0

Also, if start > end, the arguments are swapped:

alert( "testme".substring(4, -1) )  // "test"
// -1 becomes 0 -> gives us substring(4, 0) 
// 4 > 0 so arguments are swapped -> gives us substring(0, 4) = "test"

That arguments swapping is kind of counter-intuitive. But guess, the idea is to get a substring between two indices.

slice

Negative values mean to go backwards from the tail:

alert( "testme".slice(-2) )  // "me", from position last-2 to end

alert( "testme".slice(1, -1) )  // "estm", from 2nd to 2nd from tail.

That’s much more convenient than substring.

Negative indexes are also supported in substr by all browsers except IE.

truncate("and here is what I want to say on that matter:", 20)) = "and here is what ..."

truncate("hi to all!", 20)) = "hi to all!"

Comparison

Strings are compared lexicographicaly. For two strings inequality s1 > s2 is checked using simple algorithm:

1. Compare first chars: a = s1.charAt(0) with b = s2.charAt(0). If they are equal then continue, else return > or <
2. Compare second character, etc

The standard defines that more precisely, although the point is clear (I hope): characters are compared one by one. This order we can see in a dictionary or a phonebook.

"Z" > "A" // true
"Bob" > "Bar" // true, because o > a
"aa" > "a"  // true, because an absence of a char always loses in comparison

Check it out:

alert("a" > "Z") // true, cause lowercased letters go higher in browser characters list

Strings vs Numbers

Note the difference in behavior between strings and numbers in comparisons:

alert(2 > 14);  // false
alert("2" > "14"); // true, because "2" > "1" (first char matters)

But note:

alert(2 > "14"); // false

That’s because if any of the operands is not string, then both operands become numbers, and the comparison becomes correct.

Summary

Now you know:

• How to write a string, with special symbols and quoting.
• How to strings are compared.
• How to extract a portion of string.

In addition to concatenation which is done by “+” operator, that’s all we need in most of cases.

Later we’ll discuss regular expression, that’s important in JavaScript also.

To learn about other methods of String, you can browse Mozilla manual.