top of page

working with strings in Javascript

In this section, we shall look at some of the operations that could be performed with strings or on string. We will also look at some string methods.

Concatenating Strings

To concatenate strings mean to join two (2) strings together to form a single sign, basically this can be done  using a plus (+) operator

Example:

var f_name = 'Joy'

var l_name = 'Lawson''

var full_name = f_name +"  " + l_name

Output:

// Joy Lawson

Working with long strings

When you have a long string like this one below,

var l_String = "Computer programming is the process of designing and\ building an executable computer program for accomplishing a specific\ computing task.";

Backslash character ("\") , added at the end of each line will indicate that the string will continue on the next line.

But you must be  sure there is no space or any other character after the backslash (except for a line break), otherwise it will not work. 

Sometimes,  you may wish to  break the string into multiple lines in the source code  using a plus (+) operator  without affecting the actual string contents. This will also  append multiple strings together, like this:

Example:

let l_String = "Computer programming is the process of designing" +

and building an executable computer program for accomplishing +

a specific  computing task.";

Comparing strings

 In JavaScript, you just use the less-than and greater-than operators:

var a = 'a';

var b = 'b';

if (a < b) {

      console.log(a + ' is less than ' + b);

} else if (a > b) {

      console.log(a + ' is greater than ' + b);

} else {

       console.log(a + ' and ' + b  + ' are equal.');

}

output:

// a is less than b

Converting/Casting strings

By using String() or toString() functions,  you can change the value of a string to an object or change the value of a data typr to a string data type.

var d_string= 'foo';

var d_str_obj = new String (d_string);

console.log (typeof d_string);

 

Output:

//  creates a string primitive"string"

 

Output:

console.log (typeof d_str_obj);

//  creates a String object"object"

Similarly,  Other data types or objects, can be converted to string, using the same String or toString keywords.

function about_Strings() {
       var val_1 = new Date();// date object
       var val_2 = "2700"; //string
       var val_3
 = 2700; //number

  var new_str_val =
       String(val_1) + "<br>" +
       toString(val_2) + "<br>" +
       toString(val_3);
       document.getElementById("demo").innerHTML = res;

}

Output:

Sat Jan 26 2019 03:00:54 GMT+0000 (Greenwich Mean Time)
12345
12345

Manipulating Strings

There are so many effect we can achieve by manipulating a given string or strings In this Example, we ar going to be using  three string methods

split();

reverse();

join();

function myFunction() {
  var dDtring2= 'Programming is interesting'
  let splitted=  dDtring2.split('').reverse().join('-');
  document.getElementById("demo").innerHTML = splitted;
}

Output:

g-n-i-t-s-e-r-e-t-n-i- -s-i- -g-n-i-m-m-a-r-g-o-r-P

Aside from these methods mentioned here, there are many others including:

charAt(), charCodeAt(), concat(), endsWith(), includes(), indexOf(), lastIndexOf(),  match(), repeat(),  replace(), search() slice(), split(), startsWith(), substr(), substring(), toLocaleLowerCase(), toLowerCase(), toString(), toUpperCase(), trim(), valueOf().

Meanwhile,  you can give the examoles we have used above a try, to see how they work

Example: Working With Strings

<html>
<head>
</head>
<body>
    <img id="source_image" alt=".." src='C:\Users\Grace\Desktop\LUVPIX.JPG' /><br><br>
    <h1>WORKING WITH STRINGS</h1><br><br>
    
    Enter  any text: <input id="myInput" type="text">
    How many letter are you expecting?: <input id="myInput2" type="text">    
    <input id="btn" type="button" value = 'Randomnise' onclick='word()'/><br>
    
    <p id="demo"></p>
    
<script>
    function word(){
        var starting_String = "";
        var get_value=document.getElementById("myInput").value;
        var get_value2=document.getElementById("myInput2").value;
        var int_get_value2 = parseInt(get_value2, 10)
        var start_name=function(){
            return
        
        }
        if (get_value.length > int_get_value2){
            while (starting_String.length <int_get_value2 ) {
                starting_String =starting_String+ get_value[Math.floor(Math.random() * get_value.length)];
            } 
            document.getElementById("demo").innerHTML=starting_String;
        }else {
            document.getElementById("demo").innerHTML='Please enter a text longer than' +' ' + int_get_value2;
        }
        
    }
</script>
</body>
</html>

bottom of page