Home arrow JavaScript arrow Page 2 - Stringing Things Along

Elementary School - JavaScript

Think JavaScript's only good for image swaps and tickertapes?Think again - the language comes with a powerful String() objectdesigned to help you quickly and efficiently perform string manipulationtasks in the client. This article explains how, with illustrations andcode samples.

  1. Stringing Things Along
  2. Elementary School
  3. When Size Does Matter
  4. Slice And Dice
  5. Building Character
  6. Search And Destroy
  7. Bigger, Bolder, Better
By: Harish Kamath, (c) Melonfire
Rating: starstarstarstarstar / 10
January 22, 2003

print this article


Let's start with the basics. In JavaScript, the term "string" refers to a sequence of characters. The following are all valid examples of strings:

"hey wassup?"
"a long time ago in a galaxy far, far away"

String values can be assigned to a variable using the standard assignment operator.

<script language="Javascript">
var myStr = "Elementary, my dear Watson";

String values may be enclosed in either double quotes ("") or single quotes('') - the following variable assignments are equivalent:

<script language="Javascript">
var myStr = "Elementary, my dear Watson";
var myStr = 'Elementary, my dear Watson';

This comes in handy when you need to embed HTML code in your JavaScript strings, and don't want the various sets of quotes to conflict with each other. Consider the following example, which illustrates:

<script language="Javascript">
// bad
var myStr = "<a href="http://www.melonfire.com">Home</a>";
// good
var myStr = '<a href="http://www.melonfire.com">Home</a>';

You can also take the scenic route, and define a string using JavaScript's built-in String object, as below:

<script language="Javascript">
var myStr = "Elementary, my dear Watson";
// this is equivalent
var myStr = new String();
myStr = "Elementary, my dear Watson";
// and so is this
var myStr = new String("Elementary, my dear Watson");

When you do this, you create a proper JavaScript object, and thereby have access to all the methods and properties of that object. Note that it's not essential to create strings using the second technique outlined above; it's far more common (not to mention easier on your keyboard) to use the first one, because the JavaScript interpreter automatically converts string datatypes into string objects whenever necessary.

If you're a JavaScript newbie, this next example won't do much for you - but for those of you who are purists, this next code snippet will help in making the distinction between a datatype and an object clearer.

<script language="Javascript">
var myStr = "Hit me";
// this returns "string"
var myStr = new String("Hit me");
// this returns "object"

You can concatenate strings with the addition (+) operator - as the following example demonstrates:

<script language="Javascript">
var fname = "James";
var lname = "Bond";
// concatenate the two, separate with a space
var name = fname + " " + lname;

If your string contains quotes, carriage returns or backslashes, it's necessary to escape these special characters with a backslash.

<script language="Javascript">
// will cause an error due to mismatched quotes
var movie = 'Baby's Day Out';
// will be fine
var movie = 'Baby\'s Day Out';

Try it out yourself and see, and then flip the page to see how to dress up your strings.

>>> More JavaScript Articles          >>> More By Harish Kamath, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: