Following is a list of methods with their description:
- startsWith( queryString, position )
Method:
This method returns either true, if the string starts with the provided string from the specified position, otherwise false. This method is case-sensitive. This method accepts two arguments : queryString: The string which has to be searched at the beginning of the String. position (optional): The position from where the search has to be start. Please note that its default value is 0.
Example:
< script >
let str = "thewebguyy";
console.log(str.startsWith("the"));
// Here specified position is 5, that means
// searching will start from 'f' whose index
// in string str is 5
console.log(str.startsWith("for", 5));
console.log(str.startsWith("webguyy"));
< /script>
Output:
true
true
false
- endsWith( queryString, length )
Method:
This method returns either true, if the string ends with the provided string for specified length, otherwise false. This method is case-sensitive. This method accepts two arguments: queryString: The string which has to be searched at the end of the String. length (optional): The length of the string. Please note that its default value is length of the string.
Example:
<script>
let str = "thewebguyy";
console.log(str.endsWith("the"));
// Here specified length is 8, that means
// length of str will be considered as 8
// and rest will be omitted
console.log(str.endsWith("for", 8));
console.log(str.endsWith("webguyy"));
</script>
Output:
true
true
false
- includes( queryString, position )
Method:
This method returns either true if the string is present in the provided string, otherwise returns false. This method is case-sensitive. This method accepts two arguments: queryString: The string which is to be searched in the String. position (optional): The position from where the search has to be start. Please note that its default value is 0.
Example:
<script>
let str = "thewebguyy";
console.log(str.includes("eks"));
// Here search will start from index 8
// of str
console.log(str.includes("for", 8));
console.log(str.includes("webguyy"));
</script>
Output:
true
false
false
- repeat( count )
Method:
This method accepts single argument which is an integer value that represents the number of times the string is to be repeated. This method returns the newly created string with ‘count’ times repeated old string. Note: The argument provided i.e. count must be an positive integer.
Example:
<script>
let str = "Thewebguyy";
console.log(str.repeat(2));
let newStr = str.repeat(3);
console.log(newStr);
</script>
Output:
ThewebguyyThewebguyy
ThewebguyyThewebguyyThewebguyy
Template Literals:
These literals are string literals that allow embedded expression. Templatestrings use back ticks (") rather than the single or double quotes. A template could be written as
var greeting = 'hello world!';
String Interpolation and Template Literals
Template strings can use placeholders for string substitution using the ${} syntax as demonstrated:
var name = "Esther";
console.log('Hello, ${name}!');
Result:
Hello, Esther!
Template literals and expressions
var a = 10;
var b = 10;
console.log('The sum of ${a} and ${b} is ${a+b} `);
Result:
The sum of 10 and 10 is 20
Template literals and function expression
function fn() { return "Hello World"; }
console.log('Message: ${fn()} !!`);
Result:
Message: Hello World!!
Multiline Strings:
In-order to create a multiline string an escape sequence \n was used to give new line character. However, Template Literals there is no need to add \n string ends only when it gets backtick (`) character.
Example:
<script>
// Without template literal
console.log('Some text that I want \non two lines!');
// With template literal
console.log(`Some text that I want
on two lines!`);
</script>
Output:
Some text that I want
on two lines!
Some text that I want
on two lines!
Expressions:
To dynamically add values into new Template Literals expressions are used. The ${} syntax allows an expression in it that produces the value. This value can be a string stored in a variable or a computation operation. ${expression}
Example :
<script>
let principal = 1000;
let noofyears = 1;
let rateofinterest = 7;
let SI = `Simple Interest is ${(principal *
noofyears * rateofinterest)/100}`;
alert("Simple Interest is" + SI);
</script>
Tagged Templates:
One of the features of Template Literals is its ability to create Tagged Template Literals. Tagged Literal is written like a function definition, but the difference is when this literal is called. There is no parenthesis() to a literal call. An array of Strings are passed as a parameter to a literal.
Example 1:
<script>
function TaggedLiteralEg(strings) {
document.write(strings);
}
TaggedLiteralEg `Thewebguyy`;
</script>
Output:
Thewebguyy
Example 2:
It is also possible to pass values to a tagged literal. This value can be a result of some expression or a value fetched from the variable. The code below shows the use of Tagged Literal.
<script>
function TaggedLiteralEg(strings, value, value2) {
document.write(strings);
document.write("<br>"+value2+" "+value);
}
let text = 'Thewebguyy';
TaggedLiteralEg`test ${text} ${2+3}`;
</script>
Output:
test , ,
5 Thewebguyy
Raw String:
Raw method of template literal allows access of raw strings as they were entered, without processing escape sequences. In addition, the String.raw() method exists to create raw strings just like the default template function, and string concatenation would create.
Example:
<script>
var s=String.raw`Welcome to Bode's Blog Value of expression is ${2+3}`;
document.write(s);
</script>
Output:
Welcome to Bode's Blog Value of expression is 5
Nested Templates:
Templates can be nested if it contains multiple expression evaluation or multiple condition checking. Instead of using else if ladder this is readable and gives ease to the developer. The code below finds the maximum of three numbers using conditional operator and nested template literal.
Example:
<script>
function maximum(x, y, z) {
var c = `value ${ (y>x && y>z) ? 'y is greater' :
`${x>z ? 'x is greater' : 'z is greater'}` }`;
return (c);
}
document.write(maximum(5, 11, 15)+"<br>");
document.write(maximum(15, 11, 3)+"<br>");
document.write(maximum(11, 33, 2)+"<br>");
</script>
Output:
value z is greater
value x is greater
value y is greater