Применение двух стилей к одному значению массива js?

Question

[formasters777]

Есть одно значение массива цена прайса product.price, и равно 14.78,
в обычном html была просто цифра 14.78 и можно было её разделить span или другим элементом,
в js есть только одно значение {product.price},
как вариант можно добавить метод product.price.slice(0, 2) или product.price.substring(0, 2),
но не будет ли это влиять на производительность и скорость загрузки, например если позиций будет 100 или 1000 позиций, или это настолько малая стилизация которая не влияет и её не учитывают?

<p className={style.price}>
<span className={style.price_green}>
<span className={style.price_size}>15</span>.00</span> $/кг 
<span className={style.price_red}><span className={style.price_size}>19</span>.00</span> $/кг</p>

Comments

[Ankhena]

но не будет ли это влиять на производительность и скорость загрузки, например если позиций будет 100 или 1000 позиций

Попробуйте конкретно на вашем сайте ;)

Цвет, если что, можно поменять так (мало надежно и зависит от шрифта, что там с символами, но немножко подшаманить можно)
https://jsfiddle.net/Ankhena/5jecmvw0/

[formasters777]

Алан Гибизов, но ведь можно например, через conditional rendering применить по условию стиль один, а если не выполняется другой.
основной минус, что число приходится делить или обрабатывать доп. кодом,
стилизацию в этом случае нельзя настроить для числа {15.00}, отдельно для 15. и 00
его приходится делить и дополнительно обрабатывать в js,
если б было два элемента span, тогда Да, можно nth-child поставить, самое ближайшее, что похоже это first-letter, но видимо пока они не внесли таких изменений в сам СSS.

[formasters777]

Ankhena, спасибо, пока остановился на 3 методах, replace, substring и slice, приходится ещё делать проверку на кол-во цифр в стоимости для стилизации.
Ещё из таких вариантов, как понимаю, есть возможность брать одно число, скрывать стилями его часть,
например показывать только 15, а вторым стилем показывать .00, через ::before / ::after,
но это нужно проверять.

[Ankhena]

formasters777, у вас же не всегда нули там. Иначе не было бы проблем.

Зачем проверку? Всё, что до точки и всё что после, обычной регуляркой.

[Модератор]

См.п.3.6

[formasters777]

Модератор, наверно речь идёт об однотипных и одинаковых вопросах.
Да, есть такая проблема,
мне из-за этого запретили писать вопросы на stack overflow, теперь можно только отвечать.
Но также это и интересная проблема, ведь при таком кол-ве вопросов, скорей всего модераторам в dashboard, приходят только те сообщения, которые схожи на уже существующие вопросы по тематике, система делает выборку, и они решают что делать с той или иной темой, плюс как понимаю, за это они получают деньги.
Возможно по этой причине вижу много однотипных аккаунтов с одним, двумя вопросами, которые создают через Puppeteer или подобные вариации.

Answer 1

[Aetae]

По-хорошему - делаешь ещё один массив(через usememo) с уже разложенным как надо значениями и уже с ним работаешь.
Но в целом substring каждый рендер даёт пренебрежимо мизерные накладные расходы, а вся идея React: "хреначь сейчас, оптимизируй потом(никогда)", так что делай как хочешь.)