The string data type is used to represent text. Accordingly, values of type string are text. Any text in JavaScript is a string.
QuotesStrings in JavaScript must be enclosed in quotes. There are three types of quotes in JavaScript: double quotes (" "), single quotes (" "), and backticks (` `):
"String in double quotes" "String in single quotes" `String in backquotes`
The type of quotes at the beginning and end of the line must match.
Strings can consist of zero or more characters:
"" // Empty string "String" // Not empty string
Strings with double and single quotes are no different in functionality - they can only contain text and escape sequences. But strings with backquotes have wider functionality. Such strings may contain so-called substitutions, denoted by a dollar sign and curly braces $(expression). Substitutions can contain any arbitrary expressions:
Let str = "Peace!"; let str2 = `Hello $(str)`; // Using a variable in the line alert(page2); // Hello World! alert(`2 + 3 = $(2 + 3).`); // 2 + 3 = 5.
The expression in the substitution ($(...)) is evaluated and its result becomes part of the string.
Backquoted strings can span more than one line, preserving all whitespace characters:
Let numbers = `Numbers: 1 2`; alert(numbers); // Numbers: // 1 // 2
Strings with backticks are called wildcard strings or template literals.
Strings enclosed in one quotation mark may contain other quotation marks:
"single quotes and backticks inside double quotes" "and here it's 'so' and 'so'!" `and here “so” and “so”!`
For convenience, large string literals can be split into multiple lines, ending each line except the last with a \ character:
Alert("this is all one \ long \ line"); // it's all one long line alert("it's all one \ long \ line"); // it's all one long line alert(`it's all one \ long \ line`); // it's all one long line
String character encodingRegardless of what encoding is set for the page, JavaScript always uses UTF-16 encoding for strings.
In JavaScript, a string is an immutable, ordered sequence of 16-bit values, each representing a Unicode character. JavaScript uses UTF-16 to represent Unicode characters. Characters include letters, numbers, punctuation, special characters, and whitespace.
String lengthThe length of a string is the number of 16-bit values (not the characters themselves) it contains. The length of the string is contained in the length property:
Alert("Hello".length); // 6
Characters whose code points do not fit into 16 bits are processed according to the UTF-16 encoding rules as a sequence of two 16-bit values. This means that a string that has a length of 2 (two 16-bit values) can actually represent a single character:
Alert("a".length); // 1 alert("𝑒".length); // 2
Numbering and accessing string charactersAs already mentioned, a string is an ordered sequence of 16-bit values, each of which corresponds to a specific character. The numbering of 16-bit values in a string starts from zero, i.e. the first 16-bit value is at index 0, the second at index 1, etc. The index is a sequence number.
You can get a string character (consisting of a single 16-bit value) using an index enclosed in square brackets [index] :
Let str = "Hello"; alert(str); // P alert(str); // IN
To use indices to refer to a character consisting of two 16-bit values, you need to use concatenation to write these indices so that the result is a sequence of two 16-bit values:
Let str = "𝑒"; alert(page + page); // "𝑒"
Strings are immutableIn JavaScript, strings are immutable. This means that you cannot change any characters in an existing string or add anything new to it.
Since strings are immutable, methods used to work with strings return new strings rather than modifying the string on which they were called:
Let str = "Hello!"; alert(str.toUpperCase()); // "HELLO" - new value returned by the method alert(page); // "hello" - the original line is not changed
To change a string, you can create a new string and write it to the same variable instead of the old string:
Let str = "String"; str = str.toUpperCase(); alert(str); // "LINE"
Escape SequencesYou can use escape sequences in string literals. An escape sequence is a sequence of ordinary characters that represents a character that cannot be represented within a string in other ways. Escape sequences are used to format the output of text content.
The table below shows the control sequences:
| \0 | The NUL character is the empty character ("\u0000"). |
| \t | Horizontal tab ("\u0009"). |
| \n | Newline ("\u000A"). |
| \b | Going back one position is what happens when you press the backspace key ("\u0008"). |
| \r | Carriage return ("\u000D"). |
| \f | Page translation - page clearing ("\u000C"). |
| \v | Vertical tab ("\u000B"). |
| \" | Double quote ("\u0022"). |
| \" | Single quote ("\u0027"). |
| \\ | Backslash ("\u005C"). |
| \xNN | The number of a character from the ISO Latin-1 character set, specified by two hexadecimal digits (N is hexadecimal digit 0-F). For example, "\x41" (this is the code for the letter "A"). |
| \uNNNN | The number of a character from the Unicode character set, specified by four hexadecimal digits (N is hexadecimal digit 0-F). For example, "\u0041" (this is the code for the letter "A"s). |
Escape sequences can appear anywhere on a line:
Alert("Greek letter sigma: \u03a3."); // Greek letter sigma: Σ. alert("Multiline string") // Multiline string alert("double quotes are used inside"); // double quotes are used inside
If the \ character precedes any character other than those given in the table, then it is simply ignored by the interpreter:
Alert("\k"); // "k"
Unicode characters specified using an escape sequence can be used not only inside string literals, but also in identifiers:
Let a\u03a3 = 5; alert(a\u03a3); // 5
ConcatenationConcatenation is the joining of two or more strings into one larger string. Concatenation occurs using the + (plus) operator. When concatenating, each subsequent line is added to the end of the previous one:
Var str1 = "Hello"; var str2 = "World!"; document.write(str1 + str2 + "
"); // "Hello World!" document.write(str1 + "World!"); Try »
A value of any type that is concatenated with a string will be implicitly (automatically) converted to a string and then concatenated.
Var str1 = "Hello"; alert(str1 + 1); // "Hello 1" alert(true + str1); // "trueHello" alert(str1 + NaN); // "Hello NaN"
Listing 1.9 represents HTML code that contains two numbers (1 and 2), an operation sign (+), a form with a “Calculate” button and a text field to display the entered values. It is necessary to implement the operations of adding the corresponding values (Listing 1.10).
Listing 1.9. File 1.html
Adding numbers
The form consists of one text field for displaying values. To organize the symbols “1”, “2”, “+”, tags were used (other tags could be used, for example, or buttons), and a button was used to display the final result. The containers have an onClick event that calls the addition(…) function, passing the corresponding value (1, 2, +) to the JS script as a parameter. A button with id="ok" calls the press_button() function, which has no parameters. This function calculates and outputs the result back to the window.
Listing 1.10. my_script.js file
The first function in Listing 1.10 populates the form's text field with the value "1", "2", or "+", depending on which tag was clicked.
The second function reads the value attribute value from the text field with id="answer" and assigns this value to the equation variable. This is a string that contains n characters. For example, it is possible to write ""1+2+1"" or ""1212+1121+1++2"".
Since we know in advance that the addition operation is used, the "+" sign is used as a string separator into an array of numbers. The .split("+") function is used for this. The numbers variable contains these values.
Now you need to go through the array and add up all the elements. To do this, use the for (i in numbers)(…) loop. However, there are two important points to consider when adding.
First, the numbers array contains string values. If you use the “+” operation for string values, the elements will be merged into one string. We want to get the answer to adding numbers. Therefore, it is necessary to convert string values to numeric values. To do this, use the parseInt(numbers[i]) function. An array element with number = i is passed into it.
Secondly, the user may initially specify the wrong string. For example, ""1212+1121+1++2"". In this case, when using the .split("+") function, not only numbers will be obtained, but also empty values. Empty values should be discarded. To do this, use the if (numbers[i] != "") condition.
Finally, to calculate the results, the variable var answer was introduced, initially equal to 0. Values are added to it in the loop at each iteration step. This value is then returned back to the text field document.getElementById("answer").value = answer.
The good thing about function addition(value) and press_button() is that they can be used to add any integer. You can set all the numbers in a range in tags and handle the onClick() event. Or allow input into the text field with id="answer" and disable entering letters.
The press_button() function (as currently written) is not suitable for handling all number operations. Because the split function splits a string by only one value.
To implement processing of other arithmetic operations, you can, for example, add the first two entered numbers, analyzing the sign between them. Those. without waiting for the “Calculate” button to be pressed, process the input values and output an intermediate result (Listing 1.11, 1.12).
Listing 1.11. File 1.html
Adding numbers
Note that in this case (Listing 1.11) all values are passed to the press_button() function.
Listing 1.12. my_script.js file
The press_button(value) function analyzes the passed value. If the value is a number (1 or 2), then the sequence is entered into the text field.
If the passed value is a “+” sign, the previously entered number is added to the answer (answer += parseInt(number); ), the entered string is reset to zero: number = "";, the answer is displayed in the text field. These actions only happen if number != "", i.e. if a number was entered before entering the “+” sign.
If the passed value is the word “ok”, a comparison is made again “whether a number was previously entered”. If not, then the value of the text field is not changed. If a number has been entered, then the summation occurs and the result is displayed. Since pressing the button does not involve further summation, the answer again takes the value 0.
Mathematical operations are one of the most basic and universal functions of any programming language. In JavaScript, numbers are often used in common tasks such as determining the size of a browser window, calculating the final price of a monetary transaction, or the distance between elements in a website document.
You don't need to be good at math to be a good developer, but it is important to know what types of operations are available in JavaScript and how to use them to perform practical tasks.
Unlike other programming languages, JavaScript only has one numeric data type; it doesn't distinguish between integers and floats.
This tutorial will cover arithmetic operators, assignment operators, and order of operations with JavaScript numeric data.
Arithmetic operatorsArithmetic operators are symbols that define mathematical operations and return a result. For example, in 3 + 7 = 10, the symbol + defines the syntax for the addition operation.
Many JavaScript operators are familiar to you from basic mathematics, but there are also several additional operators.
All JavaScript arithmetic operators are presented in the following table.
| Operator | Syntax | Example | Definition |
| Addition | + | x+y | Sum of x and y |
| Subtraction | — | x - y | Difference between x and y |
| Multiplication | * | x*y | Derivative of x and y |
| Division | / | x/y | Quotient of x and y |
| Module | % | x % y | Remainder x/y |
| Exponentiation | ** | x**y | x to the power of y |
| Increment | ++ | x++ | x plus one |
| Decrement | — | x— | x minus one |
Addition and subtraction operators are available in JavaScript and can be used to find the sum and difference of numeric values. JavaScript has a built-in calculator, and mathematical operations can be performed directly in the console.
The plus sign allows you to add numbers, for example:
In addition to operations with prime numbers, JavaScript allows you to assign numbers to variables and perform calculations on them. For example, you can assign numeric values to the variables x and y, and put the result in z.
// Assign values to x and y
let x = 10;
let y = 20;
//Add x and y and assign the sum to z
let z = x + y;
console.log(z);
30
// Assign values to x and y
let x = 10;
let y = 20;
// Subtract x from y and assign the difference to z
let z = y - x;
console.log(z);
10
// Assign values to x and y
let x = -5.2;
let y = 2.5;
// Subtract y from x and assign the difference to z
let z = x - y;
console.log(z);
-7.7
One interesting feature in JavaScript that you should consider and know is the result of adding a number and a string. We know that 1 + 1 must equal 2, but this equation will give an unexpected result.
let x = 1 + "1";
console.log(x);
typeof x;
11
"string"
Instead of adding numbers, JavaScript converts the entire expression into strings and concatenates them. It's important to be careful with dynamic typing in JavaScript because it can have undesirable results.
Addition and subtraction in JavaScript are often used to scroll the navigation bar.
function scrollToId() (
const navHeight = 60;
window.scrollTo(0, window.pageYOffset - navHeight);
}
window.addEventListener("hashchange", scrollToId);
In this case, the panel will scroll 60 pixels from the id.
Multiplication and divisionJavaScript multiplication and division operators are used to find the derivative and quotient of numeric values.
The asterisk is the multiplication operator.
// Assign values to x and y
let x = 20;
let y = 5;
// Multiply x by y to get the product
let z = x * y;
console.log(z);
100
Multiplication can be used to calculate the price of an item after sales tax has been imposed.
const price = 26.5; // Price of item before tax
const taxRate = 0.082; // 8.2% tax rate
// Calculate total after tax to two decimal places
let totalPrice = price + (price * taxRate);
totalPrice.toFixed(2);
console.log("Total:", totalPrice);
Total: 28.67
Slash is the division operator.
// Assign values to x and y
let x = 20;
let y = 5;
// Divide y into x to get the quote
let z = x / y;
console.log(z);
4
Division is especially useful when calculating time, such as calculating the number of hours or percentage correct on a test.
The absolute value of a numberModulus is another arithmetic operator, less popular than the previous ones. Represented by the % symbol. It returns the remainder when the first number is divided by the second.
For example, we know that 9 is divisible by 3 without a remainder:
The number modulus allows you to determine whether a number is even or odd, for example:
// Initialize function to test if a number is even
const isEven = x => (
// If the remainder after dividing by two is 0, return true
if (x % 2 === 0) (
return true;
}
// If the number is odd, return false
return false;
}
// Test the number
isEven(12);
true
In this example, 12 is divisible by 2, so it is an even number.
In programming, the number modulus is often used in combination with conditional statements.
ExponentiationExponentiation is one of the newest operators in JavaScript. The syntax for exponentiation is two asterisks in a row (**).
For example, 10 to the fifth power (10^5) is written like this:
10 ** 5;
100000
The operation 10**5 has the same result as 10*10 repeated 5 times.
10 * 10 * 10 * 10 * 10;
This operation can also be written using the Math.pow() method.
Math.pow(10, 5);
100000
Using the exponentiation operator is a quick way to determine the power of a given number, but as always, when choosing between a method and an operator, it is important to be consistent and code in the same style.
Increment and decrementThe increment and decrement operators increase or decrease the numeric value of a variable by one. They are represented by two plus signs (++) or two minuses (-) and are often used in loops.
Please note that the increment and decrement operators can only be used with variables. Trying to use them with prime numbers will result in an error.
7++
Uncaught ReferenceError: Invalid left-hand side expression in postfix operation
The increment and decrement operators can be classified as prefix and postfix operators, depending on where the operator is placed in relation to the variable.
The prefix increment is written as ++x.
//Set a variable
let x = 7;
let prefix = ++x;
console.log(prefix);
8
The value of x has increased by 1. The postfix increment is written as y++.
//Set a variable
let y = 7;
// Use the prefix increment operation
let postfix = y++;
console.log(postfix);
7
The postfix operation did not increment the value. This value will not be incremented until the expression is evaluated. To do this, you need to run the operation twice:
let y = 7;
y++;
y++;
console.log(y);
8
Most often these operators are found in loops. In this for loop, the for statement is executed 10 times, starting from 0.
// Run a loop ten times
for (let i = 0; i< 10; i++) {
console.log(i);
}
0
1
2
3
4
5
6
7
8
9
In this example, the loop is iterated using the increment operator.
Simply put, x++ can be thought of as short for x = x + 1, and x can be thought of as short for x = x – 1.
Assignment OperatorsOne of the most commonly used operators is the assignment operator, which we have already seen in this tutorial. It is represented by an equal sign (=). The = symbol is used to assign the value on the right to the variable on the left.
// Assign 27 to age variable
let age = 27;
In addition to the standard assignment operator, JavaScript has compound assignment operators, which combine the arithmetic operator with the = operator.
For example, the add operator will start from the original value and add a new value to it.
// Assign 27 to age variable
let age = 27;
age += 3;
console.log(age);
30
Essentially, age += 3 is the same as age = age + 3.
All arithmetic operators can be combined with an assignment operator. Below is a reference table of assignment operators in JavaScript.
Compound assignment operators are often used in loops, like increments and decrements.
Operator precedenceOperators are executed in order of priority, just like in ordinary mathematics.
For example, multiplication has higher priority than addition.
// First multiply 3 by 5, then add 10
10 + 3 * 5;
25
If you need to perform an addition operation first, put it in parentheses - such operations always have the highest priority.
// First add 10 and 3, then multiply by 5
(10 + 3) * 5;
65
Below you will find a table of precedence of arithmetic operators in JavaScript. For increment and decrement, the postfix has higher priority than the prefix.
Increment/decrement, multiplication/division and addition/subtraction have the same priority level.
Not only arithmetic operators have priority, but also assignment operators, logical operators, conditional operators, etc. You can see the full list.
Tags: JavaScript - Lesson 1. Basic Concepts The JavaScript programming language was developed by Netscape in collaboration with Sun Microsystems and released in 1995. JavaScript is designed to create interactive HTML documents. Main uses of JavaScript:- Creation of dynamic pages, i.e. pages whose content may change after loading.
- Checking that user forms are filled out correctly.
- Solving "local" problems using scripts.
- JavaScript code is the basis of most Ajax applications.
Programs (scripts) in this language are processed by an interpreter built into the browser. Unfortunately, not all scripts run correctly in all browsers, so test your javascript programs in different browsers.
The JavaScript language is case sensitive, i.e. uppercase and lowercase letters of the alphabet are considered different characters.
Before you start writing scripts, you need to be familiar with basic concepts such as literals, variables, and expressions.
Literals
Literals are the simplest data that a program can work with.
- Integer literals- integers in the representation:
- decimal, for example: 15, +5, -174.
- hexadecimal, for example: 0x25, 0xff. Hexadecimal numbers include the numbers 0 - 9 and the letters a, b, c, d, e, f.
- They are written with the symbols 0x in front of the number.
- octal, for example: 011, 0543. Octal numbers include only the numbers 0 - 7. Real literals
- - fractional numbers. The integer part is separated from the fractional point, for example: 99.15, -32.45. Exponential notation is possible, for example: 2.73e -7. In its usual form it is 2.73X10 -7 , but in javascript the multiplication sign and 10 are replaced by the symbol -e-.
- Boolean values- of two: truth (true) and falsehood (false).
- a sequence of characters enclosed in single or double quotes. For example: "your name", "your name". Variables
Variables are used to store data. Variables are defined using the operator
var
, followed by the variable name. The variable name must begin with a letter of the Latin alphabet or with an underscore. The name itself may include letters of the Latin alphabet, numbers and an underscore.
For example:
var test = var_test
Variables are used to store data. Variables are defined using the operator
var_my_test1
Each variable can be assigned a value either during its initialization (declaration) or in the code of the program itself. The assignment operator is denoted by the equal sign (
), but the equal sign does not have its direct meaning here. In this case, it only indicates that a value has been assigned to this variable.
var a=15
var b=23.15 var c="done" var s=true Each variable has a type, determined by the value of the variable. So in our example: variables a And b have type number , variable c has type string
, and the variable
s
- logical type. var c="done" Expressions Expressions are constructed from literals, variables, operator signs, and parentheses. The result of evaluating an expression is a single value, which can be a number, a string, or a Boolean value. In the expression a*b, And b * are called
operands
, A
- operation sign. The following operations are defined in javascript:
In order to be able to compare two values, comparison operations are defined in javascript, the result of which can only be a logical value: true or false:
Boolean operations are defined in javascript:
&& - logical AND (AND),
|| - logical OR (OR),
! - logical NOT (NOT).
The results of the influence of logical operators on various combinations of operand values are shown in the table:
| true | true | true | true | false |
| true | false | false | true | false |
| false | true | false | true | true |
| false | false | false | false | true |
Simply put, the value of A&&B is true if both statements are true, and false otherwise. The value of the expression A||B is true if the value of at least one operand is true, and false otherwise. If the value of operand A is true, then!A is false and vice versa.
An operation is defined for string literals string concatenation, i.e. their unification. This operation is indicated by a plus sign (+). The result of the operation is also a string. Example:
Var st1="Hello";
var st2="Vasya";
var st3=st1+st2;
As a result, the st3 variable will contain the value “Hello Vasya”.
At the end, we present a table of priorities of operations in descending order. Operator precedence determines the order in which the operations in an expression are performed.
The first lesson has come to an end, it turned out to be theoretical, but without theory it is impossible to move on to practice.
Good day to everyone who is reading this article. Today I will tell you in detail about addition in JavaScript. More precisely, we will discuss with you how the addition of prime numbers, string variables and arrays is performed, what is the difference between unary and binary operators, what are the priorities of operations, and also what is meant by increment and decrement.
Let's get started!
Let's understand the termsAt the very beginning of this article, I want you to understand the basic terms in programming languages related to calculations. Perhaps most of you have been operating with them for a long time. And that's great.
So, it's worth knowing what terms like operand, unary and binary operator mean.
An operand is the element to which certain operators are applied. So, for example, in the entry “15 - 38” the operator is the minus sign, and the operands are the numbers 15 and 38.
What is a unary or binary operator? Everything is simple here too. Unary (from the word "uno", meaning "one") applies to only one element. For example, -7. In this case, the minus is a unary operator. And binary (it’s already clear what “two” means) works with two objects. Here we can use “12*701” as an example.
“I have priorities! That’s why I don’t care about your order!”I am sure that everyone knows about the priorities of performing arithmetic operations. However, with the study of programming languages, other types are added to this list. There are 20 levels in total, starting from 0 to 19.
In the table attached below, I have listed several operators in order of importance.
If to solve a problem you need to learn about other operators, then go to the full table provided at the link.
Increment and decrementLet's start by prioritizing. The most common operations in JavaScript, as in other programming languages, are those named in the title of the current chapter. They are used to decrease or increase the value of a particular element by one.
There are two types of both increment and decrement: postfix and prefix. Moreover, the first type has priority 16, and the second – 15.
The difference lies in the moment at which the number changes. Thus, prefix types increase or decrease the value immediately. Therefore, if the line says:
then when you run the program, 2 will be displayed. While when using postfix operators after running the code
1 will be displayed.
Let's look at an example that is often given in tests or interviews. You need to say what will be displayed on the screen for the first and second outputs.
1 2 "use strict"; 3 var i = 3; 4 i--; // short and convenient notation for i = i - 1. 5 alert(++i + i++); //i=? 6 alert(i);// i=? 7
Now let's take a look. The fourth line indicates the decrease of i by one. The changes will take effect when the next line of the program is executed. Therefore, when alert is called, the variable i will be equal to 2.
A prefix increment immediately increases the value by 1, while a postfix increment takes effect on the next line. As a result, we get the entry “3+3”, which means 6 will be displayed in the dialog box.
On the next line, the increase worked and therefore displays 4.
Something new when adding elementsIn JS you can add not only numbers, but also other types of variables: strings, etc. As an example, check out part of the program.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function myFunction() ( var a=3, b=7; var str1="Hi, ", str2="friend!"; var c = a+b; var str = str1+str2; var mix = str1+a; alert(c+"\n"+str+"\n"+mix); //will display: 10 // Hi, friend! // Hi, 3 )
In the second and third cases of addition, strings are concatenated, i.e. combining them into one. This is where problems arise for novice developers.
Let's say you pulled out a certain value, which is a string var str1="10";
and at the same time you need to sum it with the number var a=3; . If the operation var mix = str1+ a; , then when outputting alert (mix);
“103” will appear on the screen. To avoid this, the text variable must be converted as follows:
var mix = parseInt (str1, 10)+a;. //answer: 13
Let's move on to arrays. In a scripting language, there is a function that combines several arrays into one. This is concat.
| 1 2 3 4 | var numbers1 = ; var numbers2 = ; // this results in an array; var nums = numbers1.concat(numbers2); alert(nums);
|