DEV Community

Himanshupal0001
Himanshupal0001

Posted on

All about Strings(Function, Properties and template literals)!!!

You probably heard about the strings. Strings are the array of characters in "" or ''.For example "This is string" or 'This is string'.
It's a very important topic to learn in programming. W are using strings everywhere, like literally everywhere. So there are tons of string function build in many programming languages to ease out the things.

Now the question is what are string functions??

String functions are nothing but the predefined function in any programming language. Oh!!!! you don't need to use these functions if you create your own custom functions ;).

Image description


Here's the link that grouped the different string functions according to their functionality.

//String properties and Functions

//special trick for special characters




//let text = "This is an "important" line to remember"; this will give error
let text = "This is an \"important\" line to remember";
console.log(text);

let text1 = "This is \\ line to remember";
console.log(text1);

//Function for strings
const name = "Himanshu Pal  ";
const greeting = "Greetings";
const phrase = "A quick brown fox jumps over the lazy dog";
console.log(greeting + ' ' + name);
console.log(greeting.concat(' ', name));//also use this function to concatinate
console.log(name.toLowerCase()); //change all character to uppercase
console.log(name.toUpperCase()); //change all character to owercase
console.log(phrase.length); //return the total length of the string within '' or ""
console.log(name.indexOf('a')); // return the index number of the character
console.log(phrase.lastIndexOf('dog'));
console.log(phrase.charCodeAt(5)); //return unicode index value of that particular character
console.log(phrase.endsWith('g')); //check last letter or word of string 
console.log(String.fromCharCode(65)); //convert unicode digit to character
console.log(phrase.includes('fox'));
console.log(phrase.localeCompare(name)); //return -1 if first variable character appears before the second variable character--> ex: ab compare cd return -1
                                        //return 1 if first variable character appears after the second variable character--> ef compare cd return 1
                                       //return 0 if first variable character appears equally the second variable character ab compare ab return 0

console.log(phrase.match(/ox/g)); //match regular expression within a string
console.log(name.repeat(2)); //repeat the string given number of times
console.log(phrase.replace("fox", "Ox"));// replace given string with desired string
console.log(phrase.search('fox'));
console.log(phrase.slice(0,8));//extract a part of string within givin index value
console.log(phrase.split(" ")); //convert string into array of string
console.log(phrase.startsWith('A')); 
console.log(phrase.substring(2,7)); //select the substring from a sting  Output => quick
//The main diffrenct between substring and substr is 
//substring() pick value of the first given index and and end before n-1. means if we given index 2-7 it will treverse 2-6
//substr(0 pick value fron first given index value to last till n. Means grom 2-7)
console.log(phrase.substr(2,7)); //Output => quick b
console.log(phrase.toString());//return value of string Object
console.log(phrase.trim()); //remove whitespace from both ends of the string
console.log(phrase.valueOf()); //return primitve value of string object



console.log("Concept of \" = \" , \" == \" and \"===\" in String");
//Ways we can use string
let var1 = "100"; //litral value passed in primitive string
let var2 = 100; //another example of litreal passed to primitve string
let var3 = "100";

let varobj = new String("100"); // we defined an object type string with "new" keyword

//How they impact 
console.log(var1==var2); //RETURN TRUE regardless of datatype
console.log(var1==varobj); // RETURN TRUE even ignoring the object type
console.log(var1===varobj);//RETURN FALSE  strictly checking both value nd datatype
console.log(var3===var1);// RETURN TRUE BOTH VALUE AND DATA TYPE MATCHING
//Diffrence between "=" , "==" and "==="

//Properties of String
console.log(phrase.constructor);
console.log(phrase.length);

//Protoype  allow toadd methods and properties in  an object
function employee(name, job, tittle)
{
    this.name = name;
    this.job = job; 
    this.tittle = tittle;
}

employee.prototype.salary = 2000;

const fred = new employee('Alex', 'IT', 'Analyst', 4000);

console.log(fred);
console.log(fred.salary);


let html;

html = "<h1> this is heading</h1>"+
       "<p> this is my para</p>"; //using  "+" will be complicated for long html scripts

    //use template lirtals to avoid "+" and optimize code

html = html.concat('this');
console.log(html);
console.log(html.includes('is'));
console.log(html.split(' '));
console.log(html.split('>'));


// Starting with template littrals
let namee = 'Himanshu';
let fruit1 = 'Orangr';
let fruit2 = 'Apple';
let myHtml = `Hello ${namee}
              <h1> This is heading </h1>
              <p> You like ${fruit1} and ${fruit2}
             `; //using backtick button just upper key of tab left of 1 key

document.body.innerHTML = myHtml;
Enter fullscreen mode Exit fullscreen mode

Please go through above code also read comments that will give you better understanding of the things. Also I've given defination for most of the functions. You can run this code and see the outputs.


What is Template Literals ??

Image description

Before this question we should ask, Why template literals? Template literals come into existence for two reasons. First: Concatenation redundancy and second able to use variable in the script. But first you get to know about `important point: which is backticks. Key just above the tab key left of the digit 1. These backticks are more efficient the "" or ''. Because we can't use "" or '' for multi line string also it's little complex to use " ''" and ' "" ' . Backticks remove these anomalies.

Template Literals is used to type HTML in Js. By using these we can directly write html in js and use buildin Js funtion for different purposes.

Image description

Discussion (0)