Главная страница   /   4.5. Использование операторов JavaScript (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

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

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

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

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

Многие операторы JavaScript используются вместе с операторами условия. В этой книге я в основном использую операторы if/else и switch. В листинге 4-19 показано использование обоих (они вам знакомы, если вы работали почти с любым языком программирования).

Листинг 4-19: Использование условных операторов if/else и switch
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">

		var name = "Adam";

		if (name == "Adam") {
			console.log("Name is Adam");
		} else if (name == "Jacqui") {
			console.log("Name is Jacqui");
		} else {
			console.log("Name is neither Adam or Jacqui");
		}

		switch (name) {
			case "Adam":
				console.log("Name is Adam");
				break;
			case "Jacqui":
				console.log("Name is Jacqui");
				break;
			default:
				console.log("Name is neither Adam or Jacqui");
				break;
		}
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

Оператор равенства и оператор тождества

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

Листинг 4-20: Использование оператора равенства
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var firstVal = 5;
		var secondVal = "5";
		if (firstVal == secondVal) {
			console.log("They are the same");
		} else {
			console.log("They are NOT the same");
		}
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

They are the same

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

Листинг 4-21: Использование оператора тождества
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var firstVal = 5;
		var secondVal = "5";
		if (firstVal === secondVal) {
			console.log("They are the same");
		} else {
			console.log("They are NOT the same");
		}
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

They are NOT the same

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

Листинг 4-22: Проверка на равенство и тождественность объектов
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<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;

		console.log("Test 1: " + test1 + " Test 2: " + test2);
		console.log("Test 3: " + test3 + " Test 4: " + test4);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

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

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

Листинг 4-23: Проверка на равенство и тождественность примитивных типов
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<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;

		console.log("Test 1: " + test1 + " Test 2: " + test2);
		console.log("Test 3: " + test3 + " Test 4: " + test4);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

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

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

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

Листинг 4-24: Приоритет оператора конкатенации строк
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">

		var myData1 = 5 + 5;
		var myData2 = 5 + "5";

		console.log("Result 1: " + myData1);
		console.log("Result 2: " + myData2);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

Result 1: 10
Result 2: 55

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

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

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

Листинг 4-25: Использование метода number.toString
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">
		var myData1 = (5).toString() + String(5);
		console.log("Result: " + myData1);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

Result: 55

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

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

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

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

Листинг 4-26: Преобразование строк в числа
<!DOCTYPE HTML>
<html>
<head>
	<title>Example</title>
	<script type="text/javascript">

		var firstVal = "5";
		var secondVal = "5";

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

		console.log("Result: " + result);
	</script>
</head>
<body>
	This is a simple example
</body>
</html>

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

Result: 10

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

Таблица 4-3: Полезные методы для преобразования строк в числа
Метод Описание
Number(str) Разбирает указанную строку для получения целого или вещественного значения
parseInt(str) Разбирает указанную строку для получения целого значения
parseFloat(str) Разбирает указанную строку для получения целого или вещественного значения