Форматирование текста
В этой главе приводится порядок работы со строками и текстом в JavaScript.
Строки
Строки используются для представления текстовых данных. Каждая строка — это набор «элементов», а каждый элемент — 16 битное беззнаковое целое значение. Элементы имеют определённые позиции. Так первый элемент имеет индекс 0, следующий — 1, и так далее. Длина строки — это количество элементов в ней. Вы можете создать строки, используя строковые литералы или объекты класса String.
Строковые литералы
Вы можете создавать простые строки, используя либо одинарные, либо двойные кавычки:
'foo'; "bar";
Начиная со стандарта ES6 (ES-2015) для простых и сложных строк можно использовать обратные косые кавычки, а также, вставлять значения:
const name = "Alex"; const str = `Привет, $name>, как дела?`; console.log(str); // Привет, Alex, // как дела?
Подробнее про использование обратных косых кавычек (` `), читайте ниже.
Строки с более богатым содержимым можно создать с помощью ESC-последовательностей(комбинация символов, обычно используемая для задания неотображаемых символов и символов, имеющих специальное значение):
Шестнадцатеричные экранированные последовательности
Число после \x трактуется как шестнадцатеричное.
Unicode экранированные последовательности
Экранированные последовательности Unicode требуют по меньшей мере 4 символа после \u .
"\u00A9"; // "©"
Экранирование элементов кода Unicode
Нововведение ECMAScript 6, которое позволяет экранировать каждый Unicode символ, используя шестнадцатеричные значения (вплоть до 0x10FFFF ). С простым экранированием Unicode обычно требуется писать связанные друг с другом части по — отдельности для получения того же результата.
"\u"; // То же самое с простым Unicode "\uD87E\uDC04";
Объекты String
Объект String — это обёртка вокруг примитивного строкового типа данных.
var s = new String("foo"); // Создание объекта console.log(s); // Отобразится: typeof s; // Вернёт 'object'
Вы можете вызвать любой метод объекта класса String на строковом литерале — JavaScript сам преобразует строковый литерал во временный объект String , вызовет требуемый метод и затем уничтожит этот временный объект. Со строковыми литералами вы также можете использовать и String.length свойство.
Следует использовать строковые литералы до тех пор, пока вам действительно не обойтись без String объекта, потому что, порой, объект String может вести себя неожиданно (не так, как строковый литерал). Например:
var s1 = "2 + 2"; // Создание строкового литерала var s2 = new String("2 + 2"); // Создание String объекта eval(s1); // Вернёт 4 eval(s2); // Вернёт строку "2 + 2"
Объект String имеет свойство length , которое обозначает количество символов в строке. Например, в следующем коде x получит значение 13 потому, что «Hello, World!» содержит 13 символов, каждый из которых представлен одним кодом UTF-16. Вы можете обратиться к каждому коду с помощью квадратных скобок. Вы не можете изменять отдельные символы строки, т.к. строки это массива-подобные неизменяемые объекты:
var mystring = "Hello, World!"; var x = mystring.length; mystring[0] = "L"; // Ничего не произойдёт, т.к. строки неизменяемые mystring[0]; // Вернёт: "H"
Объект String имеет множество методов, в том числе и те, которые возвращают преобразованную исходную строку (методы substring , toUpperCase и другие).
В таблице ниже представлены методы String объекта.
| Метод | Описание |
|---|---|
| charAt , charCodeAt , codePointAt | Возвращает символ или символьный код в указанной позиции в строке. |
| indexOf , lastIndexOf | Возвращает первую (indexOf) или последнюю (lastIndexOf) позицию указанной подстроки в строке. Если данная подстрока не найдена, то возвращает -1. |
| startsWith , endsWith , includes | Проверяет, начинается/кончается/содержит ли строка указанную подстроку. |
| concat | Объединяет две строки и возвращает результат в качестве новой строки. |
| fromCharCode , fromCodePoint | Создаёт строку из указанной последовательности Unicode значений. Это метод класса String, а не отдельного экземпляра этого класса. |
| split | Разбивает строку на подстроки, результат возвращает в виде массива строк. |
| slice | Извлекает часть строки и возвращает её в качестве новой строки. |
| substring , substr | Возвращает указанную часть строки по начальному и конечному индексам, либо по начальному индексу и длине. |
| match , replace , search | Работа с регулярными выражениями. |
| toLowerCase , toUpperCase | Возвращает строку полностью в нижнем (toLowerCase) или верхнем (toUpperCase) регистре. |
| normalize | Возвращает нормализованную Unicode форму строки — значения объекта String, на котором вызывается. |
| repeat | Возвращает строку, которая представляет собой повторение исходной строки указанное количество раз. |
| trim | Убирает пробелы в начале и в конце строки, результат возвращается в качестве новой строки. |
Многострочные шаблонные строки
Шаблонные строки представляют собой строковые литералы, которые могут содержать внутри себя встроенные выражения. С ними вы можете использовать многострочные строковые литералы и интерполяцию строк.
Такого типа строки заключаются в пару обратных штрихов (` `) (grave accent) вместо двойных или одинарных кавычек. Шаблонные строки могут содержать заполнители, которые выделяются знаком доллара и фигурными скобками ( $ ).
Многострочная запись
Каждая новая горизонтальная линия символов, вставленная в исходный код, является частью шаблонной строки. Используя обычные строки, вам бы потребовалось использовать следующий синтаксис для многострочной записи:
.log( "string text line 1\n\ string text line 2", ); // "string text line 1 // string text line 2"
Того же результата можно добиться и другим способом (используя синтаксис шаблонных строк):
.log(`string text line 1 string text line 2`); // "string text line 1 // string text line 2"
Встроенные выражения
Для того, чтобы добавить выражения внутрь обычных строк, вы бы использовали следующий синтаксис:
var a = 5; var b = 10; console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + "."); // "Fifteen is 15 and // not 20."
Теперь же, используя шаблонные строки, вы можете сделать это так:
var a = 5; var b = 10; console.log(`Fifteen is $a + b> and\nnot $2 * a + b>.`); // "Fifteen is 15 and // not 20."
Для более подробной информации смотри Шаблонные строки в справочнике по JavaScript.
Интернационализация
Объект Intl представляет собой пространство имён для ECMAScript API по интернационализации, которое обеспечивает чувствительное к языку сравнение строк, форматирование чисел, времени и даты. Конструкторы для объектов Collator , NumberFormat и DateTimeFormat являются свойствами объекта Intl .
Форматирование времени и даты
Объект DateTimeFormat полезен для форматирования времени и даты. В примере ниже дата форматируется так, как это принято в США (результат отличен для разных временных зон).
var msPerDay = 24 * 60 * 60 * 1000; // July 17, 2014 00:00:00 UTC. var july172014 = new Date(msPerDay * (44 * 365 + 11 + 197)); var options = year: "2-digit", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", timeZoneName: "short", >; var americanDateTime = new Intl.DateTimeFormat("en-US", options).format; console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT
Форматирование чисел
Объект NumberFormat полезен при форматировании чисел, например, валют.
var gasPrice = new Intl.NumberFormat("en-US", style: "currency", currency: "USD", minimumFractionDigits: 3, >); console.log(gasPrice.format(5.259)); // $5.259 var hanDecimalRMBInChina = new Intl.NumberFormat("zh-CN-u-nu-hanidec", style: "currency", currency: "CNY", >); console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五
Сравнение
Объект Collator полезен для сравнения и сортировки строк.
Например, в Германии есть два различных порядка сортировки строк в зависимости от документа: телефонная книга или словарь. Сортировка по типу телефонной книги подчёркивает звуки.
var names = ["Hochberg", "Hönigswald", "Holzman"]; var germanPhonebook = new Intl.Collator("de-DE-u-co-phonebk"); // as if sorting ["Hochberg", "Hoenigswald", "Holzman"]: console.log(names.sort(germanPhonebook.compare).join(", ")); // logs "Hochberg, Hönigswald, Holzman"
Примером по сортировке для словаря слов на немецком языке служит следующий код:
var germanDictionary = new Intl.Collator("de-DE-u-co-dict"); // as if sorting ["Hochberg", "Honigswald", "Holzman"]: console.log(names.sort(germanDictionary.compare).join(", ")); // logs "Hochberg, Holzman, Hönigswald"
Регулярные выражения
Регулярные выражения — это шаблоны, которые используются для описания некоторого множества строк . Это очень мощный и в некоторый степени непростой механизм, и поэтому ему посвящена отдельная глава. Узнать больше о регулярных выражениях можно здесь:
- Регулярные выражения JavaScript в руководстве по JavaScript.
- RegExp ссылка в документации.
- « Предыдущая статья
- Следующая статья »
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Введение в JavaScript — простой вывод
Изучение Node.js, JQuery, и Angular.js может быть очень веселым, но я думаю, что иметь некие базовые знания очень важно, и знать, как использовать простой JavaScript. Эта серия статей посвятит вас в JavaScript.
Прежде, чем мы перейдем к синтаксису, давайте узнаем, где мы можем запустить JavaScript.
Традиционно JavaScript использовался внутри браузеров, таких как Mozilla Firefox, Internet Explorer, Chrome, Opera, или Safari. Авторы добавляют JavaScript код в HTML страницы, которые получают пользователи, посещая веб-сайт. JavaScript код выполняется в браузере (то, что мы называем «на стороне клиента», в отличие от запуска «на стороне сервера»).
В последнее время люди начали использовать JavaScript также и на сервере. Возможно, самая известная среда для работы JavaScript на сервере это Node.js, но есть и другие. К примеру, io.js (форк от Node.js).
Мы можем выделить три основные части того, что мы обычно называем «JavaScript».
- Сам язык. Он достаточно стандартный среди различных сред, как на стороне браузера, так и сервера.
- DOM API — как язык может взаимодействовать с различными частями веб страницы в браузере. И, хотя с этой стороны браузеры достаточно близки друг к другу, все же они отличаются. Некоторые библиотеки, особенно заметна Query, пытаются предоставлять унифицированный API.
- API на сервере (или просто API), предоставляемый Node.js или одной из других систем на стороне сервера.
В этой серии статей мы посмотрим все три основных компонента.
Давайте начнем с нескольких простых примеров, которые мы можем запустить в браузере. Возможно, это самый просто способ начать, так как эти примеры требуют только браузер (раз вы это читаете, вероятно, он у вас есть) и текстовый редактор.
Редактор или IDE
Можно использовать любой текстовый редактор.
На MS Windows вы можете использовать даже встроенный Notepad, но я бы рекомендовал что-нибудь более функциональное. Вы можете скачать Notepad++, который очень похож на Notepad, но с кучей разных фич, или Aptana Studio. Научиться работать в последней будет сложнее, так что возможно, вы заходите начать с чего-то попроще.
Вставка или подключение
Вы можете как вставить JavaScript код прямо внутрь HTML файла, так и подключить внешний файл, содержащий весь JavaScript код. В большинстве случаев последнее предпочтительнее, но для нашего первого примера мы вставим JavaScript внутрь некоего HTML (просто для того, чтобы делать всю работу в одном файле).
Чтобы это сделать, мы просто добавляем открывающий тег . Между ними мы пишем наш JavaScript код.
Ввод и вывод
Самое первое, что нам нужно узнать, это как взаимодействовать с кодом JavaScript, работающим в браузере. Есть несколько способов, которыми JavaScript может показать текст для пользователя (вывод). Самый простой — функция alert :
alert
Это покажет в браузере всплывающее окно (попап) с текстом. (Вы можете нажать Try! и страница откроется в отдельном окне). Функция alert() сейчас используется редко, но это простой способ продемонстрировать работу JavaScript.
examples/js/alert.html
Если хотите попробовать сделать это самостоятельно, откройте ваш редактор и создайте файл с расширением .html (например, hello.html) и вставьте код ниже в ваш файл. Затем вернитесь в браузер и откройте файл в браузере (большиство браузеров позволяет это сделать с помощью меню File/Open File).
document.write
examples/js/document_write.html
First line Last line
В этом примере у нас есть некоторый текст (First line), затем JavaScript код, а затем еще немного текста (Last line). Этот код на JavaScript использует функцию document.write для изменения содержимого страницы. Он просто вставит
Hello World
после «First line», но до «Last line».
Эта функция часто использовалась, когда нужно было изменить что-то отображаемое на странице. Сегодня есть более продвинутые способы.
console.log
В заключение давайте посмотрим, как обычно разработчики выводять некую отладочную информацию.
examples/js/console.html
Большинство веб-браузеров предоставляют то, что называется «JavaScript console». Это дополнительное окно (которое не видно в нормально режиме), где браузер выводит предупреждения и ошибки, сгенерированные кодом JavaScript. Разработчики также могут выводить информацию в эту консоль с помощью вызова console.log() .
Для того, чтобы увидеть консоль, вам нужно будет ее открыть. Если вы используете Chrome на OSX вы можете открыть консоль с помощью Command-Option-J .
Переводчик
Savenkova Natalya
Published on 2015-03-28
If you have any comments or questions, feel free to post them on the source of this page in GitHub. Source on GitHub. Comment on this post
document.write — первая программа
Лучший способ освоить программирование на JavaScript это начать программировать. Для этого вы можете использовать текстовый редактор, я буду работать в PHPStorm и весь код набирать в данной среде разработки.
Что бы вы мыслили не шаблонно и могли сами писать код, начнем обучение с самых низов, первые программы, которые рассмотрим, будут очень простые.
Откроем документ формата HTML5 , и перед закрывающим тегом head пропишем . Тем самым браузеру доем понять, что за данным тегом последует JavaScript .
Напишем программу, которая будет выводить сообщение на экран при помощи функции alert(‘уроки по javascript’);
alert ('уроки по javascript');
рис 1
Функция alert() – это команда, вызывающая окно оповещения и отображающее сообщение, находящееся в скобках. Пока не обращаем внимание на пунктуацию (скобки, кавычки, точки с запятой). Все постепенно мы с Вами это разберем, для какой цели они нужны.
Запускаем данную страничку в браузере, видим диалоговое окно с нашей надписью. Если окно не появилось, возможно, где то сделали опечатки или ошибку, перепроверьте весь код и повторно загрузите страницу.
Кликнем по кнопке ОК, что бы закрыть окно. Когда оно исчезнет, в браузере загрузится веб-страница.
Хотя это простая программа, она демонстрирует важную концепцию: браузер выполняет программу на JS одновременно с чтением кода. В этом примере функция alert() сработала до того, как браузер отобразил полностью страницу, поскольку код скрипта находится перед элементом body .
Подобная команда будет иметь значение, когда вы начинаете писать программы, манипулирующие HTML кодом веб-страницы.
Следующий вариант рассмотрим, как вывести напрямую сообщение на странице.
Обычно script прописывается внутри раздела заголовка, однако мы можем разместить программу в теле элемента body . Напишем какой ни будь текст, к примеру
Обучение JS
и разберем как вывести код при помощи JS.
Основы по обучению JS
Мир Ява скрипт устроен подобно нашему, в нем есть объекты, у объектов свои свойства, и есть методы, при помощи которых можем на них воздействовать. К примеру, у нас есть объект машин, у машины есть свойство скорость, и мы можем при помощи метода нажатия на педаль воздействовать на скорость машины.
В JS языке самый главный объект называется document в нем содержатся все объекты, элементы веб-страницы отображаемые на экране.
У этого объекта есть свои свойства и методы при помощи, которых мы можем воздействовать на данный объект. Первый метод который с вами разберем это метод Write . При помощи данного метода мы можем записывать на страницу новую веб-информацию.
Если мы хотим вывести текстовое содержание на странице, нам необходимо открыть в скобках кавычки двойные, либо одинарные и в нутрии их пропишем произвольный текст. Сохраним и посмотрим что получилось.
document.write() – это команда JS, которая буквально отображает то, что вы помещаете между открывающей и закрывающей скобками. И тут вы должны усвоить, что символы помещаете между кавычками, интерпретатор JS будет выводить как обычный текст. Также при помощи данного метода document.write() мы можем отображать и HTML код.
До этого мы написали просто текст, заключим его в параграф и JS сделаем ссылкой. HTML код будет обработан, обновив страницу, увидим в ней изменения.
У Вас возможно появился вопрос, а как же тогда вывести текст если в нем используются вторые кавычки, ведь за кавычками интерпретатор текст не поймет и скрипт работать не будет. Тут есть несколько вариантов, мы можем указать в нутрии кавычки, кавычки двойные, или если нам нужно заменить двойные и вывести одинарные. Другой вариант, экранировать кавычки, то есть перед ними ставим флешь тем самым интерпретатору даем понять, что текст не закончен, а продолжается далее.
Этот сценарий показывает, как вы можете задействовать JS для добавления контента на веб-страницу.
Данный метод мы будем использовать на протяжении всего обучающего курса, с ним будем очень часто работать, по этому, если сейчас что-то не понятно мы еще не раз к нему вернемся.
Возможно, написанные сценария оставили несколько неопределенных ожиданий от языка JS. Не волнуйтесь, вначале важно понять основу, далее вы сможете делать сложные и интересные вещи при помощи JS и самое главное писать свой код и мыслить не шаблонно.
JavaScript Вывод
Чтобы получить доступ к элементу HTML, JavaScript может использовать этот document.getElementById(id) метод.
Атрибут id определяет HTML элемент. Свойство innerHTML определяет содержание HTML:
Пример
Моя первая веб страница
Мой первый параграф
document.getElementById(«demo»).innerHTML = 5 + 6;
Изменение свойства innerHTML элемента HTML — распространенный способ отображения данных в HTML.
Использование document.write()
Для тестирования удобно использовать document.write() :
Пример
Моя первая веб страница
Мой первый параграф.
Использование document.write() после загрузки HTML документа удалит весь существующий HTML:
Пример
Моя первая веб страница
Мой первый параграф
Метод document.write() следует использовать только для тестирования.
Использование window.alert()
Вы можете использовать окно предупреждения для отображения данных:
Пример
Моя первая веб страница
Мой первый параграф
Вы можете пропустить window ключевое слово.
В JavaScript объект окна является объектом глобальной области видимости, что означает, что переменные, свойства и методы по умолчанию принадлежат объекту окна. Это также означает, что указывать window ключевое слово необязательно:
Пример
Моя первая веб страница
Мой первый параграф
Использование console.log()
В целях отладки вы можете вызвать console.log() метод в браузере для отображения данных.
Вы узнаете больше об отладке в следующей главе.
Пример
Печать на JavaScript
JavaScript не имеет объекта печати или методов печати.
Вы не можете получить доступ к устройствам вывода из JavaScript.
Единственное исключение — вы можете вызвать window.print() метод в браузере, чтобы распечатать содержимое текущего окна.
Пример
Мы только что запустили
SchoolsW3 видео
ВЫБОР ЦВЕТА
курс сегодня!
Сообщить об ошибке
Если вы хотите сообщить об ошибке или внести предложение, не стесняйтесь отправлять на электронное письмо:
Ваше предложение:
Спасибо Вам за то, что помогаете!
Ваше сообщение было отправлено в SchoolsW3.
ТОП Учебники
ТОП Справочники
ТОП Примеры
Получить сертификат
SchoolsW3 оптимизирован для бесплатного обучения, проверки и подготовки знаний. Примеры в редакторе упрощают и улучшают чтение и базовое понимание. Учебники, ссылки, примеры постоянно пересматриваются, чтобы избежать ошибок, но не возможно гарантировать полную правильность всего содержания. Некоторые страницы сайта могут быть не переведены на РУССКИЙ язык, можно отправить страницу как ошибку, так же можете самостоятельно заняться переводом. Используя данный сайт, вы соглашаетесь прочитать и принять Условия к использованию, Cookies и политика конфиденциальности.