progway — программирование, IT

progway — программирование, IT

Теги для шаблонных строк В JavaScript есть, как по мне, крайне странный синтаксис. Самым очевидным его применением можно считать styled-components и выглядит всё это примерно так: const display = 'flex'; const Button = styled.button` padding: 10px; …

Ещё один пример

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

const order = {
  city: "Москва" // представим, что возможно undefined или null
}

const { city } = order

// могут писать что-то типа такой проверки
city ? `Ваш город: ${city}` : null

Можно решить эту же задачу с помощью функции из поста выше, вот так это будет:

type SubstitutionPrimitive = string | number | boolean | undefined | null;

const isNullOrUndefined = (value: SubstitutionPrimitive): value is undefined | null => {
  return value === undefined || value === null;
};

const safePaste = (strings: TemplateStringsArray, ...substitutions: SubstitutionPrimitive[]) => {
  let result = strings[0];

  for (let index = 0; index < substitutions.length; index++) {
    const value = substitutions[index];

    if (isNullOrUndefined(value)) return null;

    result += value + strings[index + 1];
  }

  return result;
};

Просто вернем null вместо строки, если какое либо из значений в подстановках null или undefined. Вот так это будет вызываться:

const apple = {
  name: 'Яблоко',
};
const orange = {};

safePaste`Товар: "${apple?.name}"`;
// Товар: "Яблоко"

safePaste`Товар: "${orange?.name}"`;
// null

Ну типа костыль. А вроде и нет. Просто ещё один пример посмотреть как это можно применить

@prog_way_blog — чат — #javascript #code

🔥14👍6❤4🐳4

www.tgoop.com/prog_way_blog/343

2.02K viewsOct 30, 2024 at 10:40

Ещё один пример

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

const order = {
  city: "Москва" // представим, что возможно undefined или null
}

const { city } = order

// могут писать что-то типа такой проверки
city ? `Ваш город: ${city}` : null

type SubstitutionPrimitive = string | number | boolean | undefined | null;

const isNullOrUndefined = (value: SubstitutionPrimitive): value is undefined | null => {
  return value === undefined || value === null;
};

const safePaste = (strings: TemplateStringsArray, ...substitutions: SubstitutionPrimitive[]) => {
  let result = strings[0];

  for (let index = 0; index < substitutions.length; index++) {
    const value = substitutions[index];

    if (isNullOrUndefined(value)) return null;

    result += value + strings[index + 1];
  }

  return result;
};

const apple = {
  name: 'Яблоко',
};
const orange = {};

safePaste`Товар: "${apple?.name}"`;
// Товар: "Яблоко"

safePaste`Товар: "${orange?.name}"`;
// null

BY progway — программирование, IT