[JavaScript] Strings

Handling text is one of the most basic features in all programming languages. In JavaScript, the “String” object represents the text data.

1. Creating “String” Object

There are 2 ways to create a new “String” object.

  • String() constructor function with the “new” keyword
  • string literal
var greet1 = "Hello";
var greet2 = new String("World");
alert(greet1 + ", " + greet2);


2. Getting the Length

The “length” property is used to get the length of a string.

var greet = "Hello, World";
alert(greet.length); // 12


3. Accessing Characters

You can access each character in a string using its index (zero-based).

var greet = "Hello, World";
alert(greet[0]); // H
alert(greet[7]); // W

This array-like charater access is the ECMAScript 5 feature. So it might not work in old browsers.

Another way to access a character in a string is to use the “charAt()” method.

  • charAt(index) : returns the character at the specified index
  • charCodeAt(index): returns the Unicode of the character at the specified index
var greet = "Hello, World";
alert(greet.charAt(0)); // H
alert(greet.charCodeAt(0)); // 72
alert(greet.charAt(7)); // W
alert(greet.charCodeAt(7)); // 87


4. Converting the Case

The following methods are used to convert string’s case.

  • toLowerCase(): converts a string to lowercase letters
  • toUpperCase(): converts a string to uppercase letters
var greet = "Hello, World";
var lowergreet = greet.toLowerCase();
alert(greet); // Hello, World
alert(lowergreet); // hello, world
alert("Good".toUpperCase()); // GOOD

Note that calling the methods does not change the case of the string itself. The converted string is returned as a new string.


5. Finding the String in String

The “indexOf()” method is used to find a string in a string.

  • indexOf(searchstring, start): returns the index of the first occurrence
  • lastIndexOf(searchstring, start): returns the index of the last occurrence
var greet = "Good Morning, Good Afternoon, Good Evening.";
var good1 = greet.indexOf("Good"); // first Good
var good2 = greet.indexOf("Good", good1 + "Good".length); // second Good
var good3 = greet.lastIndexOf("Good"); // third Good
alert(good1 + ", " + good2 + ", " + good3); // 0, 14, 30


6. Contatenating Strings

The “concat()” method is used to contatenate strings. But, in general, the “+” operator is used.

  • concat(s2, s3, …, sX) : joins two or more strings, and returns the joined strings
var greet1 = "Good " + "Morning.";
var greet2 = "Hello";
var greet3 = greet2.concat(", ", "World", "!");
alert(greet1); // Good Morning.
alert(greet2); // Hello
alert(greet3); // Hello, World!


7. Working with Substrings

To get the part of a string, the following methods are used.

  • substr(start, length) : extracts the characters from a string, beginning at a specified start position, and through the specified number of character
  • substring(from, to) : extracts the characters from a string, between two specified indices – not including “to” itself
  • slice(start, end) : extracts a part of a string
var s1 = 'Hello, World';
alert(s1.substr(1, 3)); // ell
alert(s1.substring(1, 3)); // el
alert(s1.slice(-3, -1)); // rl

The slice() and substring() methods are roughly the same. The only difference is that the “slice()” can take negative indexes.


8. Splitting a String into an Array of Substrings

The split() method splits a string using the provided separator.

  • split(separator, limit): splits a string into an array of substrings

The “Array” object provides the “join()” method to do the opposit task.

  • join(separator) : join the elements of an array into a string
var colors = 'Red,Blue,Yellow';
var colorArray = colors.split(",");
for(i in colorArray)
alert(colorArray.join(":")); // Red:Blue:Yellow


9. Searching the Matching Content

The “search()” and “match()” methods are the more advanced searching mechanism. You can provide the  regular expression to search for a matching content in a string.

  • search(searchvalue) : returns the index of the match
  • match(regexp) : returns the matching content as an array
var s = 'w0x123y4567z89';
alert(s.search(/\d{2,3}/)); // 3 - index of "1"
var m = s.match(/\d{2,3}/g);
for (i in m)
  alert(m[i]); // 123, 456, 89


10. Replacing Content

The power of the “replace()” method is that you can use the regular expression for searching.

  • replace(searchvalue, newvalue)
var s = 'a0b123c4567d89';
var s1 = s.replace(/\d{3}/g, "xxx"); // replace 3 digits to xxx
alert(s); // a0b123c4567d89
alert(s1); // a0bxxxcxxx7d89

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s