Вы когда-нибудь нуждались в преобразовании строки в CamelCase? Я нашел интересный фрагмент кода, изучая репозиторий Supabase с открытым исходным кодом. Вот метод, который они используют:

function featureToCamelCase(feature: Feature) {
  return feature
    .replace(/:/g, '\_')
    .split('\_')
    .map((word, index) => (index === 0 ? word : word\[0\].toUpperCase()   word.slice(1)))
    .join('') as FeatureToCamelCase
}

Эта функция довольно удобна. Он заменяет двоеточия на подчеркивания, разбивает строку на слова, а затем сопоставляет каждое слово, чтобы преобразовать его в верблюжий регистр. Первое слово сохраняется в нижнем регистре, а в последующих словах первый символ пишется с заглавной буквы, а затем снова объединяется. Просто, но эффективно!

Я столкнулся с другим подходом к Stack Overflow, в котором не используются регулярные выражения. Вот альтернатива:

function toCamelCase(str) {
  return str.split(' ').map(function(word, index) {
    // If it is the first word make sure to lowercase all the chars.
    if (index == 0) {
      return word.toLowerCase();
    }
    // If it is not the first word only upper case the first char and lowercase the rest.
    return word.charAt(0).toUpperCase()   word.slice(1).toLowerCase();
  }).join('');
}

Этот фрагмент кода из SO содержит комментарии, объясняющие, что делает этот код, за исключением того, что он не использует никаких регулярных выражений. Код, найденный в способе преобразования строки в CamelCase в Supabase, очень похож на этот ответ SO, за исключением комментариев и используемого регулярного выражения.

.replace(/:/g, '\_')

Этот метод разбивает строку на пробелы, а затем сопоставляет каждое слово. Первое слово полностью пишется строчными буквами, а последующие слова пишутся с заглавной буквы в первом символе, а остальные слова — в нижнем регистре. Наконец, слова снова соединяются вместе, образуя строку в верблюжьем регистре.

В одном интересном комментарии пользователя Stack Overflow упоминается преимущество этого подхода в производительности:

“ 1 за неиспользование регулярных выражений, даже если вопрос требовал решения с их использованием. Это гораздо более понятное решение, а также явный выигрыш в производительности (поскольку обработка сложных регулярных выражений — гораздо более сложная задача, чем просто перебирать кучу строк и объединять их фрагменты). См. jsperf.com/camel-casing-regexp-or-character-manipulation/1 , где я взял некоторые из примеров здесь вместе с этим (а также мой собственный скромный улучшение производительности, хотя в большинстве случаев я, вероятно, предпочел бы эту версию для ясности)».

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

Выбрать между ними можно следующим образом:

• Используйте подход с регулярными выражениями, если вам нужно компактное однострочное решение, использующее мощные возможности JavaScript по регулярным выражениям. Также не забудьте добавить комментарии, объясняющие, что делает ваше регулярное выражение, чтобы это было понятно вам в будущем или следующему разработчику, работающему с вашим кодом.
• Выберите метод без регулярных выражений, если вы отдаете предпочтение читаемости и производительности, особенно при работе с более длинными строками или при многократном выполнении этого преобразования.

Хотите узнать, как собрать shadcn-ui/ui с нуля? Ознакомьтесь с сборкой с нуля

Обо мне:

Веб-сайт: https://ramunarasinga.com/

Linkedin: https://www.linkedin.com/in/ramu-narasinga-189361128/

Github: https://github.com/Ramu-Narasinga

Электронная почта: [email protected]

Собрать shadcn-ui/ui с нуля

Использованная литература:

1. https://github.com/supabase/supabase/blob/master/apps/studio/hooks/misc/useIsFeatureEnabled.ts#L16
2. https://stackoverflow.com/a/35976812