Главная страница   /   5.5. Использование операторов JavaScript (Руководство по HTML5

Руководство по HTML5

Руководство по HTML5

Адам Фриман

5.5. Использование операторов 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) Разбивает указанную строку для получения целого или вещественного значения