Javascript : Dealing with strings
Tags: javascript, beginners, programming, tutorial
Published: 2021-10-17 11:18:20

<h1 style="text-align: left;"><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-a-E_F0KGEic/YMCyd4lhaYI/AAAAAAAAAMc/n1TzAbYdmXc30ZrdLGvRg67cd8R-mdBqQCLcBGAsYHQ/s800/javascript4.png" style="margin-left: 1em; margin-right: 1em;"><img alt="Javascript : #4 Dealing with strings" border="0" data-original-height="300" data-original-width="800" src="https://1.bp.blogspot.com/-a-E_F0KGEic/YMCyd4lhaYI/AAAAAAAAAMc/n1TzAbYdmXc30ZrdLGvRg67cd8R-mdBqQCLcBGAsYHQ/s16000/javascript4.png" title="Javascript : #4 Dealing with strings" /></a></div><span style="font-family: Ubuntu; font-size: x-large;"><br /></span></h1><h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;">Declaring string variables</span></h1><div><span style="font-size: large;">To declare a <b>string variable</b> you use any of the keywords (var, let, const) and the <b>equal operator</b>, and the value you assign to it must be between <b>quotes</b> (double " " or single ' ').</span></div>``` javascript 
var myStr = "I am a string !" ;
```
<div><br /></div><h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;">Concatenating strings</span></h1><div><span style="font-size: large;">To concatenate strings is to add them together creating one long string.</span></div><div><span style="font-size: large;">The first method is to use the <b>plus operator </b>" <b>+</b> "</span></div>
``` javascript 
var concatenatedStr = "I am a string. " + " I am another string added to it .";
```
<p style="text-align: left;"><span style="font-size: large;"><br /></span></p><p style="text-align: left;"><span style="font-size: large;">The second method is to use the <b>plus equals operator</b> " <b>+=</b> " to <b>append</b> a string or a string variable to the end of another string variable.</span></p><p style="text-align: left;"></p>``` javascript 
let myStr = "I am a string. ";
myStr += "I am another string appended to its end.";
console.log(myStr);  // output : "I am a string. I am another string appended to its end."
```
<span style="font-size: large;"><div><span style="font-size: large;"><br /></span></div>Another example</span>``` javascript 
let mySentence = "Javascript is ";
let myAdjective = "amazing!";
mySentence += myAdjective;
console.log(mySentence); // output : "Javascript is amazing!"
```
<h1 style="text-align: left;"><br /></h1><h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;">Constructing strings using variables</span></h1><p style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;">you can construct a string using variables to make it <b>dynamic</b> and easy to change without having to change the whole string.</span></p>``` javascript 
let myName = "Rawan";
let myAge = "15";
let mySentence = "My name is " + myName + " and i am " + myAge + " years old ! " ;
console.log(mySentence);  // output : "My name is Rawan and i am 15 years old !"
```
<h1 style="text-align: left; white-space: normal;"><span style="font-family: Ubuntu; font-size: x-large;"><br /></span></h1><h1 style="text-align: left; white-space: normal;"><span style="font-family: Ubuntu; font-size: x-large;">Bracket Notation</span></h1><div><span style="font-family: Ubuntu; font-size: large;">Sometimes you want to get a character at a certain <b>index </b>in a string, you can do this using bracket notation (which is done using <b>square brackets</b> <b>[]</b> ), indexing starts at zero (<b>zero-based indexing</b>), which means that the first character is at the index <b>zero</b>.</span></div><div><span style="font-family: Ubuntu; font-size: large;"><br /></span></div><div><span style="font-family: Ubuntu; font-size: large;"><b>Finding the nth character</b></span></div>``` javascript 
let myStr = "Hello World !";
let thirdCharacter = myStr[2]; // getting the third character 
console.log(thirdCharacter); // output : "l"
```
<div><span style="font-family: Ubuntu; font-size: x-large;"><br /></span></div><div><span style="font-family: Ubuntu; font-size: large;"><b>Finding the last character</b></span></div>``` javascript 
let myStr = "Hello World !";
 // getting the last character by subtracting one from the length of the string(since indexing starts at zero)
let lastCharacter = myStr[myStr.length - 1];
console.log(lastCharacter); // output : "!"
```
<div><span style="font-family: Ubuntu; font-size: x-large;"><br /></span></div><div><span style="font-family: Ubuntu; font-size: large;"><b>Finding the nth-to-last character</b></span></div>``` javascript 
let myStr = "Hello World !";
 // getting the fifth-to -last character
let fifthToLastCharacter = myStr[myStr.length - 5];
console.log(fifthToLastCharacter); // output : "r"
```<div><span style="font-family: Ubuntu; font-size: large;"><br /></span></div><h1 style="text-align: left; white-space: normal;"><span style="font-family: Ubuntu; font-size: x-large;">Some String Methods And Properties</span></h1><div><div class="separator" style="clear: both; text-align: center;"><a href="https://ecomputernotes.com/images/javascript-string-methods.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="610" src="https://ecomputernotes.com/images/javascript-string-methods.jpg" /></a></div><br /><span style="font-family: Ubuntu; font-size: x-large;"><br /></span></div><h2 style="text-align: left; white-space: normal;"><span style="font-family: Ubuntu; font-size: large;">Finding the length of a String</span></h2><p style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;">To find the number of characters in a string you can use the <b>.length</b> <b>property</b> ( note: even spaces are treated as characters).</span></p>``` javascript 
let myStr = "Hi there"; 
let lengthOfMyStr = myStr.length;
console.log(lengthOfMyStr) // output : 8
```
<h1 style="font-family: Arial; font-size: 36px; text-align: left; white-space: normal;"><span style="font-family: Ubuntu;"></span></h1><h2 style="font-family: Arial; text-align: left; white-space: normal;"><span style="font-family: Ubuntu;"><span style="font-size: large;">Changing the letter case of a String</span></span></h2><div><span style="font-family: Ubuntu; font-size: large;">You can convert a string to be Uppercase using the <b>.toUpperCase()</b></span></div><div><span style="font-family: Ubuntu; font-size: large;"><b>method </b>and convert it to be all Lowercase using the <b>.toLowerCase() </b></span></div><div><span style="font-family: Ubuntu; font-size: large;"><b>method.</b></span></div>``` javascript 
let myYear = "Middle School" ;
let myYearInCaps = myYear.toUpperCase();
let myYearInSmallLetters = myYear.toLowerCase();
console.log(myYearInCaps, myYearInSmallLetters);
// output : "MIDDLE SCHOOL" , "middle school"
```
<h2 style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;"><b><br /></b></span></h2><h2 style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;"><b>Getting a substring from a String</b></span></h2><div><span style="font-family: Ubuntu; font-size: large;">To get a substring from a string you use the<b> .substring(start, end) method</b></span></div><div><span style="font-family: Ubuntu; font-size: large;">or the <b>.slice(start, end)</b> or the <b>.substr(start, length)</b> methods.</span></div>``` javascript 
let myStr = 'Hello World';
let hello = myStr.substring(0, 4);
console.log(hello); // output : 'Hello'
```<h2 style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;"><br /></span></h2><h2 style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;">Replacing String parts</span></h2><div><span style="font-family: Ubuntu; font-size: large;">To replace any part of the string with another one we use </span></div><div><span style="font-family: Ubuntu; font-size: large;">the <b>.replace(old string, new string)</b> method that takes the string</span></div><div><span style="font-family: Ubuntu; font-size: large;">you want to replace as the first argument and the the string </span></div><div><span style="font-family: Ubuntu; font-size: large;">you want to use it instead as the second argument.</span></div>``` javascript 
let myStr = "Jello world";
myStr.replace('J', 'H');
console.log(myStr); // output : "Hello world"
```<h1 style="font-family: Arial; text-align: left; white-space: normal;"><span style="font-family: Ubuntu; font-size: x-large;"><br /></span></h1><h1 style="font-family: Arial; text-align: left; white-space: normal;"><span style="font-family: Ubuntu; font-size: x-large;">Escaping special characters in a String</span></h1><p style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;">Sometimes you want to <b>escape a character</b> in your strings as a tab , </span></p><p style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;">a forward slash a double or single quote or a new line. here</span></p><p style="text-align: left;"><span style="font-family: Ubuntu; font-size: large;">is a table of the <b>shortcuts </b>you should use and their functions(uses).</span></p><p style="text-align: left;"></p><div class="separator" style="clear: both; text-align: center;"><br /></div><div class="separator" style="clear: both; text-align: center;"><a href="https://miro.medium.com/max/1518/0*EROX6jTOAMi7ITwn.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="334" data-original-width="759" src="https://miro.medium.com/max/1518/0*EROX6jTOAMi7ITwn.jpg" /></a></div><div><span style="font-family: Ubuntu;"><br /></span></div><div><span style="font-family: Ubuntu; font-size: large;"><b>Example code:</b></span></div></pre><``` javascript 
let myStr = "First : do something \n \t Do another thing\n Do another \"other \" thing." ;
console.log(myStr) 
// output : 
'First : do something 
	Do another thing
    Do another "other" thing.'
```
<h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;"><br /></span></h1><h1 style="text-align: left;"><span style="font-family: Ubuntu; font-size: x-large;">Understanding Strings immutability</span></h1><div><span style="font-family: Ubuntu; font-size: large;">You may think you can change a character by getting its index and assigning it to another character or string, but unfortunately, you can't (Sorry, you can't have everything you want in this hard world ! 😕).</span></div><div><span style="font-family: Ubuntu; font-size: large;"><br /></span></div><div><span style="font-family: Ubuntu; font-size: large;">Instead, you can <b>re-assign</b> the whole variable to the value you want (by changing the <b>whole</b> string not only a <b>character</b>).</span></div>
``` javascript 
let myStr = "yello world";
myStr[0] = "H" ; // Outputs an error ,do the following instead
myStr = "Hello world"; // works and is perfectly fine
```