Тип данных строка (string) используется для представления текста. Соответственно, значениями типа string является текст. Любой текст в JavaScript является строкой.
КавычкиСтроки в JavaScript должны быть заключены в кавычки. В JavaScript существует три вида кавычек: двойные (" "), одинарные (" ") и обратные (` `):
"Строка в двойных кавычках" "Строка в одинарных кавычках" `Строка в обратных кавычках`
Вид кавычек в начале и конце строки должен совпадать.
Строки могут состоять из нуля и более символов:
"" // Пустая строка "Строка" // Не пустая строка
Строки с двойными и одинарными кавычками ничем не отличаются между собой по функционалу - они могут содержать лишь текст и управляющие последовательности. А вот строки с обратными кавычками имеют более широкий функционал. Такие строки могут содержать так называемые подстановки , обозначаемые знаком доллара и фигурными скобками ${выражение} . Подстановки могут содержать любые произвольные выражения:
Let стр = "Мир!"; let стр2 = `Привет, ${стр}`; // Использование переменной в строке alert(стр2); // Привет, Мир! alert(`2 + 3 = ${2 + 3}.`); // 2 + 3 = 5.
Выражение, расположенное в подстановке (${...}) вычисляется, и его результат становится частью строки.
Строки в обратных кавычках могут занимать более одной строки, сохраняя все пробельные символы:
Let числа = `Числа: 1 2`; alert(числа); // Числа: // 1 // 2
Строки с обратными кавычками называются строками-шаблонами или шаблонными литералами .
Строки, заключённые в одни кавычки, могут содержать другие кавычки:
"одинарные "кавычки" и `обратные` внутри двойных" "а здесь "так" и `так`!" `а здесь "так" и "так"!`
Для удобства, большие строковые литералы можно разбивать на несколько строк, заканчивая каждую строку, кроме последней, символом \ :
Alert("это всё одна \ длинная \ строка"); // это всё одна длинная строка alert("это всё одна \ длинная \ строка"); // это всё одна длинная строка alert(`это всё одна \ длинная \ строка`); // это всё одна длинная строка
Кодировка символов строкиВне зависимости от того, какая кодировка установлена для страницы, в JavaScript для строк всегда используется кодировка UTF-16.
В JavaScript строка - это неизменяемая, упорядоченная последовательность 16-битных значений, каждое из которых представляет символ Unicode. Для представления символов Unicode в JavaScript используется кодировка UTF-16. Символы включают в себя буквы, цифры, знаки пунктуации, специальные символы и пробельные символы.
Длина строкиДлина строки - это количество 16-битных значений (а не самих символов), содержащихся в ней. Длину строки содержит свойство length:
Alert("Привет".length); // 6
Символы, кодовые пункты которых не умещаются в 16 бит, обрабатываются в соответствии с правилами кодировки UTF-16 как последовательности из двух 16-битных значений. Это означает, что строка, имеющая длину, равную 2 (два 16-битных значения), на деле может представлять единственный символ:
Alert("a".length); // 1 alert("𝑒".length); // 2
Нумерация и доступ к символам строкиКак уже было сказано, строка представляет собой упорядоченную последовательность 16-битных значений, каждому из которых соответствует определённый символ. Нумерация 16-битных значений в строке начинается с нуля, т. е. первое 16-битное значение находится под индексом 0, второе - под индексом 1 и т. д. Индекс - это порядковый номер.
Получить символ строки (состоящий из одного 16-битного значения) можно с помощью индекса, заключённого в квадратные скобки [индекс] :
Let стр = "Привет"; alert(стр); // П alert(стр); // В
Чтобы с помощью индексов обратиться к символу, состоящему из двух 16-битных значений, нужно, используя конкатенацию, написать эти индексы так, чтобы в результате получилась последовательность из двух 16-битных значений:
Let стр = "𝑒"; alert(стр + стр); // "𝑒"
Строки неизменяемыеВ JavaScript строки неизменяемые. Это значит, что в уже существующей строке нельзя менять никакие символы или добавлять в неё что-то новое.
Так как строки неизменяемые, то методы, используемые для работы со строками, возвращают новые строки, а не изменяют ту строку, относительно которой они были вызваны:
Let стр = "Привет!"; alert(стр.toUpperCase()); // "HELLO" - новое возвращаемое методом значение alert(стр); // "hello" - первоначальная строка не изменена
Чтобы изменить строку, можно создать новую строку и записать её в ту же самую переменную вместо старой строки:
Let стр = "Строка"; стр = стр.toUpperCase(); alert(стр); // "СТРОКА"
Управляющие последовательностиВ строковых литералах можно использовать управляющие последовательности. Управляющая последовательность - это последовательность, состоящая из обычных символов, которая обозначает символ, не представимый внутри строки другими способами. Управляющие последовательности предназначены для форматирования вывода текстового содержимого.
В таблице ниже представлены управляющие последовательности:
| \0 | Символ NUL - пустой символ ("\u0000"). |
| \t | Горизонтальная табуляция ("\u0009"). |
| \n | Перевод на новую строку ("\u000A"). |
| \b | Возврат на одну позицию - то, что происходит при нажатии на клавишу backspace ("\u0008"). |
| \r | Возврат каретки ("\u000D"). |
| \f | Перевод страницы - очистка страницы ("\u000C"). |
| \v | Вертикальная табуляция ("\u000B"). |
| \" | Двойная кавычка ("\u0022"). |
| \" | Одинарная кавычка ("\u0027"). |
| \\ | Обратный слэш ("\u005C"). |
| \xNN | Номер символа из набора символов ISO Latin-1, заданный двумя шестнадцатеричными цифрами (N - шестнадцатеричная цифра 0-F). Например, "\x41" (это код буквы "A"). |
| \uNNNN | Номер символа из набора символов Unicode, заданный четырьмя шестнадцатеричными цифрами (N - шестнадцатеричная цифра 0-F). Например, "\u0041" (это код буквы "A"s). |
Управляющие последовательности могут находиться в любом месте строки:
Alert("Греческая буква сигма: \u03a3."); // Греческая буква сигма: Σ. alert("Многострочная\nстрока") // Многострочная // строка alert("внутри используются \"двойные\" кавычки"); // внутри используются "двойные" кавычки
Если символ \ предшествует любому символу, отличному от приведённых в таблице, то он просто игнорируется интерпретатором:
Alert("\k"); // "k"
Символы Unicode, указываемые с помощью управляющей последовательности, можно использовать не только внутри строковых литералов, но и в идентификаторах:
Let a\u03a3 = 5; alert(a\u03a3); // 5
КонкатенацияКонкатенация - это объединение двух или более строк в одну большую. Объединение происходит с помощью оператора + (плюс). При конкатенации каждая последующая строка добавляется в конец предыдущей:
Var str1 = "Hello ";
var str2 = "World!";
document.write(str1 + str2 + "
"); // "Hello World!"
document.write(str1 + "World!");
Попробовать »
Значение любого типа, которое объединяется со строкой, будет неявно (автоматически) преобразовано в строку и далее будет произведена конкатенация.
Var str1 = "Hello "; alert(str1 + 1); // "Hello 1" alert(true + str1); // "trueHello" alert(str1 + NaN); // "Hello NaN"
JavaScript - Урок 1. Основные понятия Язык программирования JavaScript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems и анансирован в 1995 году. JavaScript предназначен для создания интерактивных html-документов. Основные области использования JavaScript:Программы (сценарии) на этом языке обрабатываются встроенным в браузер интерпретатором. К сожалению, не все сценарии выполняются корректно во всех браузерах, поэтому тестируйте свои javascript-программы в различных браузерах.
Язык JavaScript регистрозависимый, т.е. заглавные и прописные буквы алфавита считаются разными символами.
Прежде, чем приступить к написанию сценариев, необходимо ознакомиться с основными понятиями, такими как литералы, переменные и выражения.
Литералы
Литералы - это простейшие данные с которыми может работать программа.
Переменные используются для хранения данных. Переменные определяются с помощью оператора var , после которого следует имя переменной. Имя переменной должно начинаться с буквы латинского алфавита или с символа подчеркивания. Само имя может включать буквы латинского алфавита, цифры и знак подчеркивания.
Например:
var test
var _test
var _my_test1
Каждой переменной можно присвоить значение либо при ее инициализации (объявлении), либо в коде самой программы. Оператор присваивания обозначается знаком равно (= ), но знак равенства здесь не имеет своего прямого значения. В данном случае он лишь указывает на то, что данной переменной присвоили значение.
Например:
var a=15
var b=23.15
var c="выполнено"
var s=true
Каждая переменная имеет тип, определяемый значением переменной. Так в нашем примере: переменные a и b имеют тип number , переменная c имеет тип string , а переменная s - логический тип.
Выражения
Выражения строятся из литералов, переменных, знаков операций и скобок. В результате вычисления выражения получается единственное значение, которое может быть числом, строкой или логическим значением.
В выражении a*b, a и b называются операндами , а * - знак операции. В javascript определены следующие операции:
Операторы в выражении вычисляются слева направо в соответствии с приоритетами арифметических операций. Изменить порядок вычисления можно с помощью скобок.
Для каждого из арифметических операторов есть форма, в которой одновременно с заданной операцией выполняется присваивание:
В данном случае сначала вычисляется правый операнд, а затем полученное значение присваивается левому операнду.
Для того, чтобы можно было сравнивать два значения в javascript определены операции сравнения, результатом которых может быть только логическое значение: true или false:
В javascript определены логические операции:
&& - логическое И (AND),
|| - логическое ИЛИ (OR),
! - логическое НЕ (NOT).
Результаты воздействия логических операторов на различные комбинации значений операндов показаны в таблице:
| true | true | true | true | false |
| true | false | false | true | false |
| false | true | false | true | true |
| false | false | false | false | true |
Проще говоря, значение выражения A&&B истинно, если истинны оба оператора, и ложно в противном случае. Значение выражения A||B истинно, если значение хотя бы одного операнда истинно, и ложно в противном случае. Если значение операнда А истинно, то!A - ложно и наоборот.
Для строковых литералов определена операция конкатенация строк , т.е. их объединение. Обозначается эта операция знаком плюс (+). Результатом выполнения операции является также строка. Пример:
Var st1="Привет";
var st2="Вася";
var st3=st1+st2;
В результате в переменной st3 будет значение "Привет Вася".
В конце приведем таблицу приоритетов операций в порядке их убывания. Приоритет операций определяет порядок, в котором выполняются операции в выражении.
Первый урок подошел к концу, он получился теоретическим, но без теории невозможно перейти к практике.
Листинг 1.9 представляет html-код, в котором заданы два числа (1 и 2), знак операции (+), форма с кнопкой «Посчитать» и текстовым полем для отображения введённых значений. Необходимо реализовать операции сложения соответствующих значений (Листинг 1.10).
Листинг 1.9. Файл 1.html
Сложение чисел
Форма представляет собой одно текстовое поле для вывода значений. Для организации символов «1», «2, «+» , использовались теги (можно было использовать другие теги, например или кнопки), а кнопка - для вывода окончательного результата. В контейнерах задано событие onClick , которое вызывает функцию addition(…) , передавая в JS-скрипт в качестве параметра соответствующее значение (1, 2, +). Кнопка с id="ok" вызывает функцию press_button() , которая не имеет параметров. В этой функции происходит подсчёт и вывод результата обратно в окно.
Листинг 1.10. Файл my_script.js
Первая функция в Листинге 1.10 вносит в текстовое поле формы значение «1», «2» или «+», в соответствии с тем, какой тег был нажат.
Вторая функция, считывает из текстового поля с id="answer" значение атрибута value и присваивает это значение переменной equation . Это строка, которая содержит в себе n символов. Например, возможна запись ""1+2+1"" или ""1212+1121+1++2"".
Поскольку мы заранее знаем, что используется операция сложения, знак «+» используется как разделитель строки на массив чисел. Для этого используется функция .split("+") . Переменная numbers содержит в себе эти значения.
Теперь необходимо пробежаться по массиву и сложить все элементы. Для этого используется цикл for (i in numbers){…} . Однако здесь есть два важных момента, которые необходимо учесть при сложении.
Во-первых, массив numbers содержит строковые значение. Если использовать операцию «+» для строковых значений произойдёт слияние элементов в одну строку. Мы же хотим получить ответ сложения чисел. Поэтому необходимо преобразовать строковые значения в числовые. Для этого используется функция parseInt (numbers[i]) . В неё передаётся элемент массива с номером = i.
Во-вторых, пользователь может изначально задать неправильную строку. Например, ""1212+1121+1++2"". В этом случае при использовании функции.split("+") будут получены не только числа, но и пустые значения. Пустые значения нужно отбросить. Для этого используется условие if (numbers[i] != "") .
Наконец, для подсчёта результатов была введена переменная var answer , изначально равная 0. К ней в цикле прибавляются значения на каждом шаге итерации. Затем, это значение возвращается обратно в текстовое поле document.getElementById("answer").value = answer.
Функции function addition(value) и press_button() хороши тем, что они подходят для сложения любых целых чисел. Можно задать все числа диапазона в тегах и обработать событие onClick() . Или позволить ввод в текстовое поле с id="answer" и запретить ввод букв.
Функция press_button() (в таком виде, как она написана сейчас) не подходит для обработки всех операций с числами. Поскольку функция split расщепляет строку только по одному значению.
Чтобы реализовать обработку других арифметических операций, можно, например, складывать два первых вводимых числа, анализируя знак между ними. Т.е. не дожидаясь нажатия кнопки «Посчитать», обрабатывать вводимые значения и выводить промежуточный результат (Листинг 1.11, 1.12).
Листинг 1.11. Файл 1.html
Сложение чисел
Обратите внимание, что в данном случае (Листинг 1.11) все значения передаются в функцию press_button() .
Листинг 1.12. Файл my_script.js
В функции press_button(value) происходит анализ переданного значения. Если это значение число (1 или 2), тогда последовательность вводится в текстовое поле.
Если переданное значение – знак «+», введённое до этого число прибавляется к ответу (answer += parseInt(number); ), введённая строка обнуляется: number = "";, ответ выводится в текстовое поле. Эти действия происходят только в том случае, если number != "", т.е. если перед вводом знака «+» было введено некоторое число.
Если переданное значение – слово «ok», снова происходит сравнение «было ли перед этим введено число». Если нет, тогда значение текстового поля не изменяется. Если число было введено, тогда происходит суммирование и вывод результата. Поскольку нажатие на кнопку не предполагает дальнейшего суммирование, ответ вновь принимает значение 0.
Раздел операции над переменными: : их сложение - это важный момент в изучении JavaScript , так как полученные здесь знания будут применяться постоянно.
Из предыдущего раздела кое-что о переменных Вам уже известно: создание переменных, вывод на экран их значений и правила работы с именами переменных - этот материал Вам знаком.
Приступаем к выполнению операций над переменными: сложение, вычитание, умножение и деление. И начнём, пожалуй, с чисел.
То есть с переменных, значениями которых являются числа.
// Создаём три переменных
var apple = 20 , orange = 30 , total_fruits;
// В переменную total_fruits заносим сумму двух переменных
total_fruits = apple + orange
document .write (total_fruits );
// Снова создаём три переменных
var apple = 20 , price = 17 , total_Sum;
// В переменную total_Sum заносим произведение двух переменных
total_Sum = apple * price
document .write (total_Sum );
Как видите в выполнении операций сложения и умножения над переменными, которые имею числовые значения, ничего сложного нет. С вычитанием и делением дело обстоит точно так же.
Обращаю Ваше внимание на то, что сейчас мы работали с числовыми значениями переменных.
Как Вы знаете из предыдущих примеров , в качестве значения переменной может выступать не только число, но и строка, то есть текст или фрагмент кода и т.п...
Так вот операцию сложения можно применять и к строковым значениям переменных. В этом случае происходит не сложение в математическом смысле этого слова, а соединение значений переменных .
Обратимся к примеру...
// Создаём четыре переменных
var name = " Иван", family = " Иванов", otch = " Ильич", FIO;
// В переменную FIO заносим сумму трёх переменных, как бы соединяем их значения.
// И добавляем тег
Который обозначит новый абзац
FIO = family + name + otch + "
document .write (FIO );
// Создаём три переменных.
var name = "Пётр", family = "Петров", otch = "Кузьмич";
// В переменную FIO также заносим сумму трёх переменных. И добавляем пробелы между переменными
var FIO = family + " " + name + " " + otch ;
document .write (FIO );
Иван Иванов Ильич
Петров Пётр Кузьмич
В приведённом примере мы соединили строковые значения трёх переменных при помощи операции сложения.
Чтобы фамилия, имя и отчество не получились слитыми: ИвановИванИльич , в первом случае пробелы были проставлены изначально - в значении каждой переменной, а во втором варианте пробелы были добавлены в итоговую переменную FIO при помощи всё той же операции сложения.
Фрагменты кода добавляются аналогично, что мы и сделали в первом случае: добавили тег "
" для того чтобы следующий вывод переменной FIO начинался с нового абзаца.
Теперь попробуем соединить переменную, содержащую число с переменной содержащей текст.
var myStreet = "Димитрова " , myHouse = 121 ;
Операторы: - (вычитание ), + (сложение ), * (умножение ) и / (деление ) работают точно так же, как и арифметические действия в математике. Оператор % (деление с остатком ) возвращает остаток от деления первого операнда на второй. Результат деления с остатком будет иметь тот же знак, что и первый операнд:
Alert(10 + 2); // 12 alert(10 - 2); // 8 alert(10 * 2); // 20 alert(10 / 2); // 5 alert(5 % 2); // 1 alert(-5 % 2); // -1
Оператор ** (возведение в степень ) имеет два операнда. Первый операнд является основанием степени, второй операнд - показателем степени, в результате оператор возвращает основание, возведённое в указанную степень:
2 ** 4; // 16
Все математические операторы преобразуют операнды по тем же правилам, что и функция Number() .
Унарные + (плюс) и - (минус)Оператор + (унарный плюс ) преобразует значение своего операнда в число и возвращает преобразованное значение. При использовании с числовым операндом он не выполняет никаких действий:
Var x = +"5";
Оператор - (унарный минус ) преобразует значение своего операнда в число, если это необходимо, и затем делает число отрицательным:
Var x = -5 + 3;
Унарные плюс и минус преобразуют операнды по тем же правилам, что и функция Number() .
Инкремент и декрементОператор ++ (инкремент ) увеличивает значение своего операнда на единицу. Если значение операнда не является числом, оператор автоматически преобразует его в число, увеличивает на единицу и возвращает результат, который присваивается обратно операнду.
Инкремент имеет две формы - постфиксную (оператор ставится после операнда) и префиксную (оператор ставится перед операндом). Если он используется в постфиксной форме, то сначала возвращается исходное значение операнда, и только затем значение операнда увеличивается на единицу.
