Как умножить строку js
Перейти к содержимому

Как умножить строку js

  • автор:

JavaScript: Типы данных

Что произойдет, если мы попробуем умножить число на строку? JavaScript вернет NaN (не число) — то самое значение. Оно возникает там, где вместе используются несовместимые значения. В данном случае число и строка:

3 * 'Dracarys'; // NaN 

Внутри высокоуровневых языков программирования данные разделяются по типам. Любая строка относится к типу String, а числа — к типу Number и BigInt (очень большие числа). Зачем нужны типы? Для защиты программы от трудноотловимых ошибок. Типы определяют две вещи:

  • Возможные (допустимые) значения. Например, числа в JavaScript делятся на два типа: Number и BigInt. Первые — это все числа ниже определенного порога (его можно посмотреть), вторые — выше. Такое разделение связано с техническими особенностями работы аппаратуры.
  • Набор операций, которые можно выполнять над этим типом. Например, операция умножения имеет смысл для типа «целые числа». Но не имеет смысла для типа «строки»: умножать слово «мама» на слово «блокнот» — бессмыслица.

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

Каким образом JavaScript понимает, что за тип данных перед ним? Достаточно просто. Любое значение где-то инициализируется и, в зависимости от способа инициализации, становится понятно, что перед нами. Например, числа — это просто числа без дополнительных символов, кроме точки для рациональных чисел. А вот строки всегда ограничены специальными символами (в JavaScript три разных варианта). Например, такое значение ‘234’ – строка, несмотря на то, что внутри нее записаны цифры.

JavaScript позволяет узнать тип данных с помощью оператора typeof :

typeof 3; // number typeof 'Game'; // string 

Типы данных Number, BigInt и String — это примитивные типы. Но есть и другие. В JavaScript встроен составной тип Object (а на его базе массивы, даты и другие). С его помощью можно объединять данные разных типов в одно значение, например, мы можем создать пользователя добавив к нему имя и возраст.

// Этот синтаксис изучается на Хекслете const user = < name: 'Toto', age: 33 >; 

По-английски строки в программировании называются «strings», а строчки текстовых файлов — «lines». Например, в коде выше есть две строчки (lines), но только одна строка (strings). В русском иногда может быть путаница, поэтому во всех уроках мы будем говорить строка для обозначения типа данных «строка», и строчка для обозначения строчек (lines) в файлах.

Задание

Выведите на экран число -0.304 .

Упражнение не проходит проверку — что делать? ��

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

  • Обязательно приложите вывод тестов, без него практически невозможно понять что не так, даже если вы покажете свой код. Программисты плохо исполняют код в голове, но по полученной ошибке почти всегда понятно, куда смотреть.

В моей среде код работает, а здесь нет ��

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя ��

Это нормально ��, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно ��

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

Кстати, вы тоже можете участвовать в улучшении курсов: внизу есть ссылка на исходный код уроков, который можно править прямо из браузера.

Полезное

  • Литерал
  • Статья о дробных числах

Определения

  • Тип данных — множество данных в коде (разновидность информации). Тип определяет, что можно делать с элементами конкретного множества. Например, целые числа, рациональные числа, строки — это разные типы данных.
  • Примитивные типы данных — простые типы, встроенные в сам язык программирования.
  • Строка (string) — тип данных, описывающий набор символов (иными словами — текст); например, ‘text’ или «text» .

Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics

Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе

  • Привет, Мир!
  • Комментарии
  • Инструкции (Statements)
  • Как мы проверяем ваши решения
  • Синтаксические ошибки
  • Арифметические операции
  • Операторы
  • Коммутативная операция
  • Композиция операций
  • Приоритет операций
  • Числа с плавающей точкой
  • Бесконечность (Infinity)
  • NaN
  • Линтер
  • Кавычки
  • Экранирующие последовательности
  • Конкатенация
  • Кодировка
  • Что такое переменная
  • Изменение переменной
  • Выбор имени переменной
  • Ошибки при работе с переменными
  • Выражения в определениях
  • Переменные и конкатенация
  • Стили именования
  • Магические числа
  • Константы
  • Интерполяция
  • Извлечение символов из строки
  • Типы данных
  • undefined
  • Неизменяемость примитивных типов
  • Слабая типизация
  • Функции и их вызов
  • Математические функции JavaScript
  • Сигнатура функции
  • Параметры по умолчанию
  • Вызов функции — выражение
  • Функции с переменным числом параметров
  • Детерминированность
  • Стандартная библиотека
  • Свойства
  • Методы
  • Неизменяемость
  • Свойства и методы как выражения
  • Цепочка вызовов
  • Создание (определение) функций
  • Возврат значений
  • Параметры функций
  • Необязательные параметры функций
  • Упрощенный синтаксис функций
  • Логический тип
  • Предикаты
  • Комбинирование логических операций
  • Логические операторы
  • Отрицание
  • Результат логических выражений
  • Условная конструкция (if)
  • else
  • Конструкция else if
  • Тернарный оператор
  • Конструкция Switch
  • Цикл While
  • Агрегация данных (Числа)
  • Агрегация данных (Строки)
  • Обход строк
  • Условия внутри тела цикла
  • Формирование строк в циклах
  • Синтаксический сахар
  • Инкремент и декремент
  • Возврат из циклов
  • Цикл For

→ Работа со строками в JavaScript

Во всех языках программирования есть такие операнды как строки. Представляют из себя простую группу символов и часто используются для передачи параметров или их хранения. К примеру значения свойств css класса могут храниться в строках или адрес сайта на который нужно будет сделать перенаправление тоже может храниться как строка.

Поэтому очень важно уметь работать со строками.

Оглавление

  • Объявление строки
  • Юникод
  • Конкатенация строк ( .concat() )
  • Длина строки
  • Конвертировать число в строку (Number → String)
  • Конвертировать строку в число (String → Number)
  • Преобразование регистра символов
  • .indexOf()
  • .lastIndexOf()
  • .charAt()
  • .substring()
  • .substr()
  • .split()

Возьмем какую-нибудь вымышленную строку, ну, например, какую-нибудь знаменитую фразу: «JavaScript now works!». И разберем на примере этой строки. Для начала основы работы со строками.

Объявление строки

Объявление строки выглядит вот так:

 var str = 'JavaScript now works!'; 

Сейчас была описана переменная « str » в которую мы записали определенную строку, заключив ее между одинарных кавычек. Если бы в строке уже присутствовали одинарные кавычки, которые являлись бы частью строки, то необходимо было бы использовать экранирование кавычек. То есть, ставить перед внутренней кавычкой обратный слеш «\».

 var str = 'JavaScript \'now\' work!'; 

Кстати, вложенные двойные кавычки никак не будут конфликтовать и их не нужно экранировать.

 var str = 'JavaScript "now" works!'; 

Обратная вложенность, одинарные в двойных, тоже совершенно нормально вместе сосуществуют.

Юникод

Объявим еще две строки «str1» и «str2» в которые запишем по два разных символа. Они тоже будут строками, потому что в джаваскрипте любые текстовые данные имеют тип строка (String), и нету никаких отдельных литер, как в других языках.

 var str1 = 'а'; var str2 = 'б'; alert (str1 < str2); // вернет true  

Вроде бы это логично, т.к. в кириллическом алфавите буква «а» стоит раньше буквы «б». Но вот если мы возьмем буквы «ё» и «я», то выражение:

 alert ('ё' < 'я'); // вернет false  

Это происходит из-за того, что джаваскрипту плевать какие алфавиты используют люди. У него есть свой «юникодный алфавит» в котором каждый символ соответствует определенному коду. И в выражениях выше, он сравнивает не буквы, а их представления в юникоде. При этом не имеет совершенно никакого значения в какой кодировке находится документ с которым вы работаете в windows-1251 или в utf-8 или может еще в какой-нибудь экзотической, не важно, все свои символы джаваскрипт переведет в свой юникод.

Получить юникод символа можно с помощью метода .charCodeAt(pos). Где «pos» это номер элемента в строке, начиная с нуля.

 var str = 'JavaScript now works!'; var str.charCodeAt(4) // вернет «83» var str.charCodeAt(0) // вернет «74» var str.charCodeAt(11) // вернет «110»  

Коды символов учитывают и регистр, то есть «а» — малая и «А» — большая будут иметь разные коды. В примере выше, выведенные юникоды будут такими: «83», «74», «111» и соответственно в строке « str » они будут равны 5-му, 1-му, и 12-му символам, то есть «S», «J» и «o».

Это не сложно проверить с помощью метода .fromCharCode , вот так:

 String.fromCharCode(83,74,111) // вернет «SJo»  

Если посчитать символы в строке, то как раз большая «S» будет пятым символом строки, а «J» большая первым и т.д.

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

С помощью оператора «+» строки можно складывать. Например, у нас есть две строки, « js » и « phrase » со следующими значениями:

 var js = 'JavaScript'; var phrase = 'now works!'; var str = js+' '+phrase; 

В результате в « str » мы получим нашу исходную строку, надо еще заметить, что в сложении, если присмотреться участвовал пробел, иначе бы у нас слова «JavaScript» и «now» склеились.

Для такой же операции существует также и метод – .concat() .

 var js = 'JavaScript'; var phrase = 'now works!'; var str = js.concat(' ').concat(phrase); 

Здесь также в конкатенации участвует пробел.

Длина строки

Так как, в джаваскрипте всё можно рассматривать в качестве объекта, то и строка не исключение. Поэтому с помощью встроенной функции .length можно узнать длину строки.

 var str = 'JavaScript now works!'; str.length; //вернет 21, т.к. в строке 21 символов  

Так можно вычислить длину любой строки, например, адрес этой страницы в интернете, можно представить, как строку и вывести её длину:

 var url = document.location.href; //это «http://yeap.narod.ru/js/033.html» str.length;//вернет 32 т.к. в строке «http://yeap.narod.ru/js/033.html» 32 символа  

Конвертировать число в строку (Number → String)

Как было сказано выше, любой текст уже является строкой. В строки можно преобразовывать и числа, с помощью метода .toString() . Например, у нас есть какое-нибудь число — numb.

 var numb = 12; // это число numb.toString(); //а теперь это строка  

Проверить, что произошло преобразование довольно легко. Допустим, у нас есть все тоже число numb и мы захотим произвести с ним какую-нибудь математическую операцию, ну, например сложение:

 var numb = 12; var result = numb + 3; alert(result) // вернет 15 var result = numb.toString() + 3; alert (result) // вернет 123  

В примере выше, во второй строчке к числу numb с помощью оператора «+» мы добавили «3» и, совершенно, ожидаемо получили на следующей строке число «15». А вот далее к numb был применен метод .toString() и nubm был преобразован в строку. Далее джаваскрипт увидел, что к строке пытаются добавить число, а как было сказано выше в случае строками оператор «+» при работе со строками выполняет конкатенацию, то есть просто склеивает строки, в нашем случае мы логично получили строку «123».

Конвертировать строку в число (String → Number)

Некоторые строки можно наоборот преобразовывать в числа. Так как, в примере выше, видно, что оператор сложения плюс (+) при работе со строками склеивает их. А вот оператор умножения (*), остается верен математике и честно пытается умножать.

Все знают, что если умножить любое число на единицу, в результате получится тоже самое число.

 var str = '12';// это строка var result = str * 1; // умножаем на 1 alert(result) // а теперь это число 12  

Тут джаваскрипт увидел, что строку ’12’ можно без проблем преобразовать в число, а затем умножить на единицу. И таким образом исходная строка превратится в число. А если в строке есть литеры в итоге JavaScript получит не число тип NaN (не число — Not a Number).

В этом случае можно воспользоваться встроенным методом .parseInt():

 var str = '123абв'; var result = str.parseInt(); // вернет «123»  

В примере выше видно, что JavaScipt отбросил все лишнее от строки взял только цифры и преобразовал их в число (Number).

Методы для работы со строками

На примере длины строки или других методов, которые были описаны выше, можно заметить, что методы со строкой работают по такому шаблону:

 имя_строки.имя_метода()  

Преобразование регистра символов

С помощью методов .toUpperCase() и .toLowerCase() можно менять регистр символов строк.

 var str = 'JavaScript now works!'; var result = str.toUpperCase(); // вернет «JAVASCRIPT NOW WORKS!»  
 var str = 'JavaScript now works!'; var result = str.toLowerCase(); // вернет «javascript now works!»  

.indexOf()

Один из наиболее часто используемых методов для работы со строками – .indexOf(). Каждый символ в строке имеет свою позицию (свой индекс). И с помощью этого метода можно получить индекс символа:

 var str = 'JavaScript now works!'; var result = str.indexOf('J'); // вернет «0» var result = str.indexOf('S'); // вернет «4»  

Тут как видно из первого примера отсчет индексов также начинается с нуля.

Если в строке содержится несколько одинаковых символов, то метод вернет позицию первого встретившегося с начала строки. Также можно задать сразу несколько символов: .indexOf(‘J S’). В этом случае метод вернет 0, т.к. первый символ «J» имеет индекс 0.

Метод можно использовать еще и таким образом:

 var result = str.indexOf('a', 3); // вернет «3»  

Вторым параметром здесь указано с какого индекса начать поиск символа ‘a’ вторая буква ‘a’ в строке str имеет как раз индекс 3.

Если символ указанный символ не встречается в строке то вернется значение -1 (значит false)

.lastIndexOf()

Он работает аналогично .indexOf() только выполняет поиск символа, начиная с конца строки.

 var str = 'JavaScript now works!'; var result = str.lastIndexOf('o', 3); // вернет «16»  

Последняя встречающаяся буква ‘o’ в строке str имеет индекс 16.

.charAt()

Метод .charAt() вернет символ, который будет соотвествовать указанной позиции.

 var str = 'JavaScript now works!'; var result = str.charAt(0); // вернет «J» var result = str.charAt(16); // вернет «o» var result = str.charAt(2); // вернет «v»  

Надо опять же помнить, что первый символ имеет индекс «0».

.substring()

Метод .substring() для получения подстроки. Он принимает два параметра в виде двух индексов – первого и последнего и возвращает все символы стоящие между этими индекса включая указанные.

 var str = 'JavaScript now works!'; var result = str.substring(0, 3); // вернет «Java»  

Также в методе можно указать один параметр и тогда он вернет строку начиная с указанного символа и до конца.

 var result = str.substring(4); // вернет «Script now works!»  

.substr()

Метод .substr() работает несколько иначе. В качестве второго параметра он принимает не индекс позиции символа, а количество символов.

 var result = str.substring(4, 6); // вернет «Script» var result = str.substring(0, 4); // вернет «Java»  

.split()

Метод .split() служит для разбития строки на части через указанный символ. Возьмем все ту же строку str и попробуем ее разделить на три части через пробел между словами. Пробел ведь тоже символ.

 var str = 'JavaScript now works!'; var result = str.split(' '); 

Переменная result теперь станет масивом с тремя элементами: «JavaScript», «now» и «works!».

Пробел исчез, а выводить часть строки можно теперь так:

 result[0]; // вернет «JavaScript» result[1]; // вернет «now» result[2]; // вернет «works!»  

repeat()

Метод repeat() возвращает новую строку с указанным количеством копий строки, на которой он был вызван.

Поддержка браузеров

Числа в таблице определяют первую версию браузера, которая полностью поддерживает этот метод.

Синтаксис

Значения параметров

Параметр Описание
count Обязательный. Количество повторений исходного значения строки в новой строке

Технические подробности

Возвращаемое значение: Строка. Новая строка, содержащая копии исходной строки
Версия JavaScript: ECMAScript 6

Помогите решить простой вопрос JS. Строку в число, умножить и вывести обратно

Нужно найти эту строку по Классу (потому что таких строк будет потом много) и умножить строку на число (допустим 25), чтобы обратно в ту же строку записалось умноженное число. Как это реализовать я не понимаю. Чтобы на выходе получилось так:

25000

Сделать надо на JavaScript
Отслеживать
задан 6 авг 2017 в 7:22
Никита Северин Никита Северин
43 1 1 серебряный знак 7 7 бронзовых знаков

3 ответа 3

Сортировка: Сброс на вариант по умолчанию

[].forEach.call(document.querySelectorAll('.price'), function(element) < element.textContent = element.textContent * 25; >);

1000

2000

100

Дополнительная информация:

  • Document.querySelectorAll()
  • Loop Over querySelectorAll Matches
  • NodeList
  • Function.prototype.call()
  • Node.textContent

Отслеживать
ответ дан 6 авг 2017 в 14:16
Alexander Bragin Alexander Bragin
1,245 7 7 серебряных знаков 11 11 бронзовых знаков

Ты же сам описал всё. Нужно только применить логику.

Например, изучив методы jquery можно вспомнить, что к элементу можно применить метод text с колбэк функцией, которая может вернуть любые данные.

Выглядит он так:

Function( Integer index, String text ) => String 
  • Используешь селектор . , чтобы взять данные по классу.
  • Применяешь метод text с колбэк функцией, у которой вторым параметром передается значение того самого элемента
  • В колбэке возвращаешь значение этого самого элемента умноженного на 1000 Заметка: т.к. значение элемента ( text ) строковое, то его нужно будет предварительно преобразовать в число одним из способов, описанных тут: Как сделать numeric из string?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *