¿Alguna vez has necesitado convertir una cadena a camelCase? Encontré un fragmento de código interesante mientras exploraba el repositorio de código abierto de Supabase. Este es el método que utilizan:

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

Esta función es bastante interesante. Reemplaza los dos puntos con guiones bajos, divide la cadena en palabras y luego asigna cada palabra para convertirla a camelCase. La primera palabra se mantiene en minúscula y las palabras siguientes tienen el primer carácter en mayúscula antes de volver a unirse. ¡Simple pero efectivo!

Encontré otro enfoque en Stack Overflow que no usa expresiones regulares. Aquí está la alternativa:

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('');
}

Este fragmento de código de SO tiene comentarios que explican lo que hace este código, excepto que no utiliza ningún tipo de expresión regular. El código que se encuentra en la forma en que Supabase convierte una cadena a camelCase es muy similar a esta respuesta SO, excepto por los comentarios y la expresión regular utilizada.

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

Este método divide la cadena por espacios y luego asigna cada palabra. La primera palabra está completamente en minúscula, mientras que las palabras siguientes están en mayúscula en el primer carácter y en minúsculas en el resto. Finalmente, las palabras se vuelven a unir para formar una cadena camelCase.

Un comentario interesante de un usuario de Stack Overflow mencionó la ventaja de rendimiento de este enfoque:

“ 1 por no usar expresiones regulares, incluso si la pregunta pedía una solución usándolas. Esta es una solución mucho más clara y también una clara ventaja para el rendimiento (porque procesar expresiones regulares complejas es una tarea mucho más difícil que simplemente iterar sobre un montón de cadenas y unir partes de ellas). Consulte jsperf.com/camel-casing-regexp-or-character-manipulation/1 donde he tomado algunos de los ejemplos aquí junto con este (y también mi propio modesto mejora del rendimiento, aunque probablemente preferiría esta versión en aras de la claridad en la mayoría de los casos).”

Ambos métodos tienen sus ventajas. El enfoque de expresiones regulares en el código de Supabase es conciso y aprovecha poderosas técnicas de manipulación de cadenas. Por otro lado, el enfoque sin expresiones regulares es elogiado por su claridad y rendimiento, ya que evita la sobrecarga computacional asociada con las expresiones regulares.

Así es como puedes elegir entre ellos:

• Utilice el enfoque de expresiones regulares si necesita una solución compacta de una sola línea que aproveche las poderosas capacidades de expresiones regulares de JavaScript. También asegúrese de agregar comentarios que expliquen lo que hace su expresión regular, para que su futuro yo o el próximo desarrollador que trabaje con su código puedan entenderlo.
• Opte por el método sin expresiones regulares si prioriza la legibilidad y el rendimiento, especialmente cuando se trata de cadenas más largas o se ejecuta esta conversión varias veces.

¿Quieres aprender a crear shadcn-ui/ui desde cero? Consulte compilación desde cero

Acerca de mí:

Sitio web: https://ramunarasinga.com/

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

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

Correo electrónico: [email protected]

Crea shadcn-ui/ui desde cero

Referencias:

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