Welcome to the Javascript Strings Homepage, Guest!


Javascript | The storage and manipulation of text




Strings | Text

Strings are just storage devices for text. The string is just storing a series of characters in a nice and neat fashion. A string can be any text within a set of quotation marks, and the quotation marks can be single or double.

var vehicle = "2008 Honda Shadow";

var vehicle = '2008 Honda Shadow";

The two declarations above have the same meaning and value assigned to them. They are the same exact line of code, and the only difference is the quotation marks around the values. Javascript allows the programmer to have the freedom of choice. You can use quotation marks inside of a string, as long as they don't match the quotation marks surrounding the string object.

var myName = "James' names"; is alright

var myName = "James 'JP' Patterson"; is alright

var myName = 'James "JP" Patterson'; is alright

var myName = "James "JP" Patterson"; is not alright

The last one will not work due to the same quotation marks being used inside of the string text.




Length

The length of a string can be found very easily. Javascript has a built in function, like most languages, to find the length of any string object. The built in function named length will return the length of any string it is called on.

var temp = "abcdefg"; is a standard string

var tempLength = temp.length; this should return the length of our string.

<!DOCTYPE html>
<html>
    <body>

        <p id="tutorial"></p>

        <script>
            var txt = "abcdefg";

            document.getElementById("tutorial").innerHTML = txt.length;
        </script>

    </body>
</html>



The above code will show how you can easily find the length of a string variable.




Special Characters

If you must use certain characters inside a string without Javascript interpreting the code wrong, you must use escaped characters. The backslash escape character turns special characters into string characters.

var myString = "James said, \"This will work out, okay.\" ";

<!DOCTYPE html>
<html>
    <body>

        <p id="tutorial"></p>

        <script>

            var myString = "James said, \"This will work out, okay,\" ";
            var myString2 = 'because escaped characters \'tend\' to work in Javascript.';

            document.getElementById("tutorial").innerHTML = myString + myString2;

        </script>

    </body>
</html>



Escaped characters can be used to insert additional characters in a string that are deemed special. These are special characters that can be inserted in a text with the backslash sign (\):

  • \' or \" Single or Double Quotation mark
  • \\ backslash
  • \b backspace
  • \r Carriage return
  • \f Form feed
  • \t Horizontal tabulator
  • \v Vertical tabulator




Breaking Code Lines

Sometimes, the code you write might get to be a bit long. With readability in mind, programmers often like to avoid code lines longer than 70-80 characters long. If the a Javascript statement will not fit on one line comfortably, then the best place to break the line is after an operation at the equals sign.

document.getElementById("tutorial").innerHTML =
"Hello World";

The code above is one way to shorten the length of your code within Javascript. You could also break a line in the middle of a string object using a single backslash:

document.getElementById("tutorial").innerHTML = "Hello \
World";

Remember, some browsers do not allow spaces behind the backslash, and therefor you should only use the method above when you absolutely have to. The backslash method is not preferred, and it might not have univeral support. A much safer way to break a line in the middle of a string is to use a plus sign for string addition:

document.getElementById("tutorial").innerHTML = "Hello " +
"World";

Do Not Attempt The Following:

document.getElementById("tutorial").innerHTML = \
"Hello World";

The backslash does not work in this fashion, shown above, but you can use the backslash while inside a string or use concatenation to bring the two texts together.




Strings Can Be Objects

Strings within Javascript are normally primitive values that are created through the use of a literal.

var myName = "James Patterson";

Strings can be used as objects as well. I would say underneath all strings are treated as objects, since most data types are treated as objects within Javascript.

var myName = new String("James Patterson");

Below, we will show what each one returns as we use typeof:

<!DOCTYPE html>
<html>
    <body>
    
        <p id="tutorial"></p>

        <script>
            var myFirst = "James";
            var space = " ";
            var separator = " : ";
            var myLast = new String("Patterson");  

            document.getElementById("tutorial").innerHTML =
            myFirst + separator + typeof myFirst + space +
            myLast + separator + typeof myLast;
        </script>

    </body>
</html>



Output: James : string Patterson : Object

The code above concatenates two text variables with what type they are: string and object. The string returns a string as you would expect, and the other returns an object as we expected. Don't create strings as objects, it will cause the execution of your Javascript code to be slowed down. Writing code in this way also takes longer for the programmer to finish, and it is best if you just don't program strings as objects. The object might produce unwanted results.




== to

Strings are equal to objects in a sense, if the objects are given text, and can be compared as such.

var myFirst = "James";

var myFirst2 = new String("James");

The two statements above are different, but they will yield the same result in the context of the following code:

<!DOCTYPE html>
<html>
    <body>

        <p id="tutorial"></p>

        <script>
            var myFirst = "James";
            var myFirst2 = new String("James");
            document.getElementById("tutorial").innerHTML =
            "Does myFirst = myFirst2" + " : " +
            (myFirst == myFirst2);
            </script>

    </body>
</html>



Output: true

Next, we will look at the === operator. The === operator not only tests for equality among value, but it tests for type as well:

<!DOCTYPE html>
<html>
    <body>

        <p id="tutorial"></p>

        <script>
            var firstName = "James";              
            var lastName = new String("James");  
            
            document.getElementById("tutorial").innerHTML =
            "Values = : " + (firstName == lastName) + " | " +
            "Types = : " + (firstName === lastName);
        </script>

    </body>
</html>



Output: Values = : true | Types = : false

What would happen if we compared two Objects together:

<!DOCTYPE html>
<html>
    <body>

        <p id="tutorial"></p>

        <br>

        <p id="tutorial2"></p>

        <script>
            var first = new String("James");   
            var first2 = new String("James");   
            document.getElementById("tutorial").innerHTML = (first == first2);
            document.getElementById("tutorial2").innerHTML = (first === first2);
        </script>

    </body>
</html>



Output: false false

Two objects cannot be compared for value or for type. The compare will return false in both cases, as seen above, and it is best not to compare objects in this manner.




Next, we will take a look at how String methods work in Javascript.

Just follow the buttons to continue the tutorial, Guest