JavaScript Data Types: Part 2, Strings

This is part 2 of a 4-part series on JavaScript data types. (View part 1 here.) In this article we are going to take an in-depth look at strings, one of the most important and most used data types in any language.

Grrrrrrrr!!!

No, not that kind of string! In JavaScript—and in programming in general—a string is a data type which holds text. Specifically, a set of characters. The characters may be both alphanumeric (a–z, A–Z, and 0–9), or non-alphanumeric, such as punctuation and spaces.

String Literals vs. String global object

String literals may be created using one of three different symbols:

• ‘string’ — single quotes
• “string” — double quotes
• `string` — backticks

The third option (using backticks) is called a template literal and was introduced with ES2015. Template literals introduce new and powerful capabilities for working with strings which we won’t be able to cover here. To learn more, check out this link.

Using the String global object, data may be created or explicitly coerced into a string data type.

String('string'); // creates the string 'string'
String(1234);     // explicitly coerces the number 1234 to the string '1234'

The preferred way of creating strings is through string literals (using any of the three ways).

String Properties

The string.length property may be used to find the length of a string:

var str = 'cat';
str.length; // 3

String Concatenation

Strings may be added together to create longer strings, using concatenation. There are several ways of doing this, including the + and += operators and the string.prototype.concat() method.

var a = 'A';
var b = 'quick';
var c = 'brown';
var d = 'fox';
// Example 1
var sentence = a + ' ' + b + ' ' + c + ' ' + d + '.';
// Example 2
var sentence = '';
sentence += a;
sentence += ' ';
sentence += b;
sentence += ' ';
sentence += c;
sentence += ' ';
sentence += d;
sentence += '.';
// Example 3
var sentence = a.concat(' ', b, ' ', c, ' ', d, '.');

All three examples build the string ‘A quick brown fox.’ and save it to the variable sentence. Notice that we must add a ‘space’ character in between each string. It is preferred to use + and/or += over the concat() method for better performance.

Accessing a Character in a String

Although strings — being primitive value types — are immutable, the value of each individual character in a string may be accessed in one of two ways: using the charAt() method or bracket notation:

'Hello'.charAt(0) // returns 'H'
'Hello'[0];       // returns 'H'

Other String Methods

There are several other string methods to be aware of.

string.prototype.toLowerCase()

var sentence = 'A quick brown fox.';
sentence.toLowerCase(); // returns 'a quick brown fox.'

string.prototype.toUpperCase()

var sentence = 'A quick brown fox.';
sentence.toUpperCase(); // returns 'A QUICK BROWN FOX.'

Since strings are case sensitive, these two methods can come in handy when you need to compare strings. Say you receive input from the user through a text field. You want to compare that input with some data in your program, but you don’t necessarily want to compare it with every possible permutation of upper- and lowercase letters. You can use one of these two methods to convert the user input before making the comparison. Here is an example using the prompt() method to get user input:

var firstName = prompt('What is your first name?').toLowerCase();
if (firstName == 'michael') {
  console.log('That\'s my name too!')
} else {
  console.log('That\'s a nice name.')
}

string.prototype.slice()

string.slice() lets you access part of a string. Since the string data type is a primitive data type, it is immutable. But the string.slice() method returns a new string, so we can access a part of the string and manipulate it in some way if needed.

The string.slice() method takes two arguments, beginIndex and endIndex. endIndex is optional.

Take a look at the following examples:

var sentence = 'A quick brown fox.';
sentence.slice(8, 17); // returns 'brown fox'
sentence.slice(0, 1);  // returns 'A'
sentence.slice(10);    // returns 'own fox.'

string.prototype.substring()

string.substring() behaves almost identically to string.slice(). Its two arguments are indexStart and indexEnd, with indexEnd being optional.

Note that we can substitute string.substring() for string.slice() in the examples above and get identical results:

var sentence = 'A quick brown fox.';
sentence.substring(8, 17); // returns 'brown fox'
sentence.substring(0, 1);  // returns 'A'
sentence.substring(10);    // returns 'own fox.'

To read further about string.slice() and string.substring() go here and here.

string.prototype.substr()

A variation of the string.substring() method, string.substr() will take the arguments start and length, so to achieve the same results as the previous two examples, we would do the following:

var sentence = 'A quick brown fox.';
sentence.substr(8, 9); // returns 'brown fox'
sentence.substr(0, 1); // returns 'A'
sentence.substr(10);   // returns 'own fox.'

Notice in this example we only needed to make a change to the second argument in the first substr() example.

There are many other string methods to explore. You can read more by visiting MDN.

For a look at objects in JavaScript, check out part 3 of this series here.

Questions? Comments? You can reach me at acropoiesis@gmail.com