W literałach szablonów es6, jak można zawinąć długi literał szablonu na multilinię bez tworzenia nowej linii w ciągu?
Na przykład, jeśli to zrobisz:
const text = `a very long string that just continues
and continues and continues`
Następnie utworzy nowy symbol linii w łańcuchu, interpretując go jako nową linię. Jak można zawinąć długi literał szablonu na wiele wierszy bez tworzenia nowej linii?
javascript
ecmascript-6
template-literals
Ville Miekk-oja
źródło
źródło
Odpowiedzi:
Jeśli wprowadzisz kontynuację linii (
\
) w punkcie nowej linii w literale, nie utworzy ona nowej linii na wyjściu:źródło
1.1k Airbnb library
and continues...
musi zaczynać się od zerowej pozycji w nowym wierszu, łamiąc zasadę wcięcia.To jest stary. Ale wyszło. Jeśli zostawisz jakieś spacje w edytorze, umieści je tam.
po prostu zrób normalny symbol +
źródło
Możesz po prostu zjeść podziały wierszy wewnątrz swojego szablonu.
źródło
prettier
) skonfigurowany w swoim IDE.prettier
zawija to z powrotem do jednej linii.EDYCJA : stworzyłem mały moduł NPM za pomocą tego narzędzia. Działa w sieci i w Node i bardzo polecam go nad kodem w mojej poniższej odpowiedzi, ponieważ jest znacznie bardziej niezawodny. Pozwala również na zachowanie nowych linii w wyniku, jeśli ręcznie wprowadzisz je jako
\n
, i zapewnia funkcje, gdy używasz już tagów literału szablonu do czegoś innego: https://github.com/iansan5653/compress-tagWiem, że spóźniłem się na odpowiedź, ale zaakceptowana odpowiedź nadal ma tę wadę, że nie zezwala na wcięcia po podziale wiersza, co oznacza, że nadal nie można napisać bardzo ładnie wyglądającego kodu, po prostu unikając nowych linii.
Zamiast tego, dlaczego nie użyć funkcji literału z tagiem szablonu ?
Następnie możesz po prostu otagować dowolny literał szablonu, w którym chcesz wprowadzić podziały wierszy:
Ma to tę wadę, że może mieć nieoczekiwane zachowanie, jeśli przyszły programista nie jest przyzwyczajony do składni otagowanego szablonu lub jeśli nie używasz opisowej nazwy funkcji, ale wydaje się, że na razie jest to najczystsze rozwiązanie.
źródło
Inną opcją jest użycie
Array.join
, na przykład:źródło
Użyj starego i nowego. Literały szablonów są świetne, ale jeśli chcesz uniknąć długich literałów i mieć zwarte wiersze kodu, połącz je, a ESLint nie spowoduje zamieszania.
źródło
Podobnie jak odpowiedź Douga, jest to akceptowane przez moją konfigurację TSLint i pozostaje nietknięte przez mój autoformatator IntelliJ:
źródło
Rozwiązanie zaproponowane przez @CodingIntrigue nie działa u mnie w węźle 7. Cóż, działa, jeśli nie używam kontynuacji linii w pierwszej linii, w przeciwnym razie zawodzi.
To chyba nie jest najlepsze rozwiązanie, ale działa bez problemów:
źródło