First must know what objects are in programming and the fundamental concepts of the object-oriented programming (OOP), because the string is recognized as an object in JavaScript.
JavaScript isn't a object-oriented (OO), such as C++ or Java, but is based on objects.
In the world around us the objects are, for example: a book, a car, a television ..., In JavaScript the object s are, for example: a form, a window, buttons, images, strings ...
JavaScript sees all elements of a page as objects.
An object is a collection of values called properties.
When a property is function, it’s referred to as a method.
There is various ways to create a string
: using the new
keyword or with the literal form, surrounding characters with either single quotes (') or double quotes (").
var instance_name = new String('string value here'); // using the 'new' keyword // Literal form var variable_name1 = "some text: coursesweb.net"; // with double quotes // or var variable_name1 = 'some text: coursesweb.net'; // with single quotes- The most indicated way is the literal form (with quotes).
<script> // Incorrect var a_name = 'CoursesWeb.net 'JS lesson''; // SyntaxError: missing ; before statement // Correct var a_name = "CoursesWeb.net \"JS lesson\""; // or var a_name = 'CoursesWeb.net "JS lesson"'; // or var a_name = "CoursesWeb.net 'JS lesson'"; --></script>
length
- returns the number of characters in a string.
let str ='Tutorial JS'; let nr_chr = str.length; // 11You can read in JS any character from a string using the index number. The first character has index 0 (
str[0]
), the second character has index 1 (str[1]
), and so on.<div id='dv1'>Did you smiled today?</div> <script> let str ='some_str'; //shows in #dv1 the number of character in 'str' and the third character document.getElementById('dv1').innerHTML ='The string "some_str" has '+ str.length +' characters; the third is: '+ str[2]; </script>
indexOf()
method is useful when you want to check if a string contains a specified substring.str.indexOf(s2)
returns the position of the first occurrence of the substring 's2' in 'str', or -1, if the substring is not found.
<div id='dv1'>Example with indexOf().</div> <script> let str ='In the spirit of freedom.'; //if str contains 'spirit', adds the starting index in #dv1 var ix = str.indexOf('spirit'); if(ix !=-1){ document.getElementById('dv1').innerHTML ='The word "spirit" starts from the index: '+ ix; } </script>
match()
method is useful to compare a string with a regular expression (RegExp). It returns an array with the matches or 'null'.<div id='dv1'>JavaScript example with match().</div> <script> const email ='some_name@domain.net'; //is_em is an arra like: ['email', 'name', 'domain'], or null var is_em = email.match(/^([A-z0-9]+[A-z0-9._%-]*)@([A-z0-9_\-\.]+\.[A-z]{2,5})$/i); //if email is a valid address writes the name if(is_em){ document.write('The name from the address: "'+email+'" is: '+ is_em[1]); } </script>
replace()
and trim()
.
TheIn the following example, the characters '<' and '>' are replaced in a HTML string with their HTML entities, and the resulting string is added into a Div.str.replace(s0, s2)
method replaces in 'str' the matched substring 's0' with the value from 's2'.
Thestr.trim()
method trims whitespace from the beginning and end of the string.
<div id='dv1'> JavaScript example with methods chaining.</div> <script> let htm ='<h3>Today is a Happy Day</h3>'; //replace < si > from htm with their html entities, apply trim() and adds the string in #dv1 htm = htm.replace(/</ig, '<').replace(/>/ig, '>').trim(); document.getElementById('dv1').innerHTML = htm; </script>
var str ='A text with "double" quotes'; var str ="A text with 'simple' quotes";
var str ='A text with \'simple quotes\' as those that define this string.'; var str ="Another text with \"double quotes\", as those that define this string.";
<pre id='pr1'>HTML content, object string.</pre> <script> let str ='A string defined with \'simple quotes\', \n added with backslash \\, \n and contains also "double quotes".'; document.getElementById('pr1').innerHTML = str; </script>
var tmp =`string text line 1 Line 2 and ${js_expression} JS expression.`;- js_expression can be a JavaScript variable, call of a function or JS expression with values. These are added between: ${} and are executed like any JavaScript code.
<pre id='pr1'>Template string, HTML content</pre> <script> //defines variables and an arrow function to be used in the template string let str_st ='Template string'; let arr =[8, 0]; const sumXY =(x, y)=>(x+y); //the template string var tmp =`<h3>This is ${str_st} from JavaScript</h3> Calling the function sumXY(): sum 7+8 = ${sumXY(7,8)} And a new line with <b>JS expression, 8*0 = ${arr[0] * arr[1]}</b>.`; //adds the resulted string in #pr1 document.getElementById('pr1').innerHTML = tmp; </script>
Inside a template string you can add the accent character escaped with backslash (\`).
<input type="checkbox" name="a_name" value="value" checked="checked" />
#id { background:url("path_to_image.png"); background-size:contain; background-repeat:no-repeat; }
var rest8_7 = 8 % 7; alert(rest8_7);
$nr = ceil(3.5); echo $nr; // 4