String

  1. String creation
    1. Special characters
    2. Escaping, special chars
  2. Methods and properties
    1. Length
    2. Accessing characters
    3. Manipulating strings
    4. Lowercasing / Uppercasing
    5. Finding a substring
    6. Extracting a substring: substr, substring, slice.
  3. Comparison
    1. Strings vs Numbers
  4. Summary

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:

Character Description
\b Backspace
\f Form feed
\n New line
\r Carriage return
\t Tab
\uNNNN The Unicode character which code is given by the four hexadecimal digits NNNN. For example, \u00A9 is the Unicode sequence for the copyright symbol.

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.

In recent browsers (excluding IE<8) you can also use index to access the character:

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() )

Create a function ucFirst(str) which returns str with uppercased first character:

ucFirst("john") == "John"

Note, there is no single method in JavaScript that can do so. Use charAt.

Open solution
Solution

We can’t just replace the first character, because strings are immutable in JavaScript.

The only way is to reconstruct the string:

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") )

P.S. A more advanced solution could use substr method or regular expression.

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.

In the article Operators, there was a bitwise NOT ‘~’ operator: ~n is same as -(n+1).

This feature is used to check for -1, because ~-1 == 0:

alert( ~-1 ) // 0

The check match becomes ~indexOf:

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

Generally, abusing language features in a non-obvious way is a bad thing, because lowers readability.

But here, everything’s all right. Just remember: '~ reads as “not minus one”, and "if ~indexOf" reads as "if found".

Create a function checkSpam(str) which returns true if str contains ‘viagra’ or ‘XXX’.

The function should be case-insensitive:

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

Open solution
Solution

To check in a case-insensitive way, we need to lowercase the str first, and then look for (also lowercased) substrings:

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

The full solution is at tutorial/intro/checkSpam.html.

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.

Conclusion.

The method of choice is slice(start, end).

Or, alternatively, substr(start, length) with non-negative start (negative doesn’t work in IE).

Write a function truncate(str, maxlength) that check string str length.
If the length of str is more than maxlength chars, it cuts str and appends it with '...' to make the length equal to maxlength.

The returned value is a (possibly) corrected string

For example:

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!"

This function is useful not just for a task, but for real-life, in truncating user-given subjects etc.

Open solution
Solution

The solution: tutorial/intro/string/truncate.html.

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.

Tutorial

Donate

Donate to this project