Использование операторов JavaScript

В JavaScript есть много стандартных операторов. Я собрал наиболее полезные из них в таблице 5-2.

Таблица 5-2: Полезные JavaScript операторы

Оператор	Описание
`++`, `--`	инкремент и декремент
`+`, `-`, `*`, `/`, `%`	сложение, вычитание, умножение, деление, деление по модулю
`<`, `<=`, `>`, `>=`	меньше, меньше либо равно, больше, больше либо равно
`==`, `!=`	проверка на равенство и неравенство
`===`, `!==`	проверка на тождество (строго равно) и не тождество (строго не равно)
`&&`, `\|\|`	логические И и ИЛИ
`=`	равенство
`+`	конкатенация строк
`?:`	тройной операнд оператора условия

Использование оператора равенства и оператора тождества

Оператору равенства и оператору тождества следует уделить особое внимание. Чтобы достичь равенства, оператор равенства пытается привести операнды к одному типу. Это удобная функция, если вы знаете, как это происходит. В листинге 5-19 показано, как работает оператор равенства.

Листинг 5-19: Использование оператора равенства

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var firstVal = 5;
		var secondVal = "5";
		if (firstVal == secondVal) {
			document.writeln("They are the same");
		} else {
			document.writeln("They are NOT the same");
		}
	</script>
</body>
</html>

Результат выполнения скрипта таков:

They are the same

JavaScript приводит два операнда к одному типу и сравнивает их. По существу, оператор равенства проверяет, одинаковы ли значения, независимо от типа операндов. Если же вы хотите проверить, одинаковы ли значения и типы операндов, нужно использовать оператор тождества (===, три знака равенства, в отличие от оператора равенства (==)), как показано в листинге 5-20.

Листинг 5-20: Использование оператора тождества

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var firstVal = 5;
		var secondVal = "5";
		if (firstVal === secondVal) {
			document.writeln("They are the same");
		} else {
			document.writeln("They are NOT the same");
		}
	</script>
</body>
</html>

В данном примере оператор тождества посчитает, что две переменные различны. Этот оператор не занимается приведением типов. Результат выполнения скрипта таков:

They are NOT the same

Совет
Обратите внимание, что в листингах 5-19 и 5-20 я использовал условный оператор if. Этот оператор оценивает условие и, если условие истинно (true), выполняет выражения в блоке кода. Оператор if может быть использован с дополнительным условием else, которое содержит блок кода, чьи выражения будут выполняться, если условие ложно (false).

Примитивные типы JavaScript (встроенные типы, такие как строки и числа) сравниваются по значению, а объекты – по ссылке. В листинге 5-21 показано, как JavaScript проверяет равенство и тождественность объектов.

Листинг 5-21: Выполнение проверки на равенство и тождество объектов

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var myData1 = {
			name: "Adam",
			weather: "sunny",
		};
		var myData2 = {
			name: "Adam",
			weather: "sunny",
		};

		var myData3 = myData2;
		var test1 = myData1 == myData2;
		var test2 = myData2 == myData3;
		var test3 = myData1 === myData2;
		var test4 = myData2 === myData3;

		document.writeln("Test 1: " + test1 + " Test 2: " + test2);
		document.writeln("Test 3: " + test3 + " Test 4: " + test4);
	</script>
</body>
</html>

Результат выполнения скрипта таков:

Test 1: false Test 2: true  
Test 3: false Test 4: true

В листинге 5-22 показана эта же самая проверка, выполненная для примитивных типов.

Листинг 5-22: Проверка на равенство и тождественность примитивных типов

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var myData1 = 5;
		var myData2 = "5";
		var myData3 = myData2;

		var test1 = myData1 == myData2;
		var test2 = myData2 == myData3;
		var test3 = myData1 === myData2;
		var test4 = myData2 === myData3;

		document.writeln("Test 1: " + test1 + " Test 2: " + test2);
		document.writeln("Test 3: " + test3 + " Test 4: " + test4);
	</script>
</body>
</html>

Результат выполнения скрипта таков:

Test 1: true Test 2: true  
Test 3: false Test 4: true

Явное преобразование типов

Оператор конкатенации строк (+) имеет более высокий приоритет, нежели оператор сложения (также +), что обозначает, что если это возможно, то JavaScript объединяет переменные, а не складывает их. Это может вызвать путаницу, потому что JavaScript также свободно приведет типы, чтобы получить результат, а это не всегда ожидаемый результат, как показано в листинге 5-23.

Листинг 5-23: Приоритет оператора конкатенации строк

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var myData1 = 5 + 5;
		var myData2 = 5 + "5";

		document.writeln("Result 1: " + myData1);
		document.writeln("Result 2: " + myData2);
	</script>
</body>
</html>

Результат выполнения скрипта таков:

Result 1: 10 
Result 2: 55

Второй результат может быть непонятным. Тут произошла дополнительная операция приведения типов и конкатенация строк, потому что оператор конкатенации строк имеет более высокий приоритет. Во избежание этого, можно точно, напрямую преобразовать типы, чтобы убедиться, что будет выполнена нужная операция. В таблице 5-3 описаны наиболее полезные методы приведения типов.

Преобразование чисел в строки

Если вы работаете со множеством чисел и хотите объединить их как строки, тогда вам нужно преобразовать числа в строки, используя метод toString, как показано в листинге 5-24.

Листинг 5-24: Использование метода number.toString

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var myData1 = (5).toString() + String(5);
		document.writeln("Result: " + myData1);
	</script>
</body>
</html>

Обратите внимание, что я заключил числовое значение в скобки, а потом вызвал метод toString. Это потому что вы должны разрешить JavaScript привести буквенное значение к типу number, прежде чем вы вызовете метод, который определит тип number. Также я показал альтернативный вариант для достижения такого же результата: я вызвал функцию String и передал числовое значение в виде аргумента. Оба этих способа приводят к одному и тому же результату, то есть приводят тип number к типу string, а оператор + используется для конкатенации строк, а не для сложения. Результат выполнения скрипта таков:

Result: 55

Есть несколько других методов, которые регулируют представление чисел в виде строк. Я вкратце изложил их в таблице 5-3. Все методы, описанные в таблице, определены для типа number (числового типа).

Таблица 5-3: Полезные методы приведения типа number к типу string

Метод	Описание	Возвращает
`toString()`	представляет число в десятеричной системе исчисления	`string`
`toString(2)`, `toString(8)`, `toString(16)`	представляет число в двоичной, восьмеричной или шестнадцатеричной системе исчисления	`string`
`toFixed(n)`	представляет вещественно число с n количеством знаков после запятой	`string`
`toExponential(n)`	представляет число в экспоненциальном виде с одним знаком до запятой и n числом знаков после	`string`
`toPrecision(n)`	представляет число с n количеством значащих цифр, используя, если нужно, экспоненциальную запись	`string`

Конвертация строк в числа

Обратным случаем является преобразование строк в числа, чтобы можно было произвести сложение, а не конкатенацию строк. Это можно сделать, используя функцию Number, как показано в листинге 5-25.

Листинг 5-25: Преобразование строк в числа

<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
</head>
<body>
	<script type="text/javascript">
		var firstVal = "5";
		var secondVal = "5";

		var result = Number(firstVal) + Number(secondVal);

		document.writeln("Result: " + result);
	</script>
</body>
</html>

Результат выполнения скрипта такой:

Result: 10

Метод Number довольно точный в том, как он разбирает (парсит) значение строки, но есть еще две более гибкие функции, которые используют только числовые символы. Это функции parseInt и parseFloat. Я описал все методы в таблице 5-4.

Таблица 5-4: Полезные методы для преобразования строк в числа

Метод	Описание
`Number(str)`	Разбивает указанную строку для получения целого или вещественного значения
`parseInt(str)`	Разбивает указанную строку для получения целого значения
`parseFloat(str)`	Разбивает указанную строку для получения целого или вещественного значения

5.6. Работа с массивами

или RSS канал: