Rozważ ten kod:
var age = 3;
console.log("I'm " + age + " years old!");
Czy istnieją inne sposoby wstawiania wartości zmiennej do łańcucha oprócz konkatenacji łańcucha?
javascript
string
string-interpolation
Tom Lehman
źródło
źródło
Show GRAPH of : ${fundCode}-${funcCode}
dostaje mnieShow GRAPH of : AIP001-_sma
(użyj odwrotności wokół ciągu 1 ... nie wydaje się, aby wyświetlał się tutaj)Odpowiedzi:
Od wersji ES6 możesz używać literałów szablonów :
PS Uwaga użycie backticks:
``
.źródło
tl; dr
W razie potrzeby użyj literałów ciągowych szablonu ECMAScript 2015.
Wyjaśnienie
Nie ma bezpośredniego sposobu, aby to zrobić, zgodnie ze specyfikacjami ECMAScript 5, ale ECMAScript 6 ma ciągi szablonów , które były również znane jako quasi-literały podczas opracowywania specyfikacji. Użyj ich w ten sposób:
Możesz użyć dowolnego prawidłowego wyrażenia JavaScript w
{}
. Na przykład:Inną ważną rzeczą jest to, że nie musisz się już martwić ciągami wieloliniowymi. Możesz napisać je po prostu jako
Uwaga: Użyłem io.js v2.4.0 do oceny wszystkich ciągów szablonów pokazanych powyżej. Możesz także użyć najnowszego Chrome do przetestowania powyższych przykładów.
Uwaga: Specyfikacje ES6 są teraz sfinalizowane , ale nie zostały jeszcze zaimplementowane przez wszystkie główne przeglądarki.
Zgodnie ze stronami Mozilla Developer Network zostanie to zaimplementowane w celu zapewnienia podstawowej obsługi począwszy od następujących wersji: Firefox 34, Chrome 41, Internet Explorer 12. Jeśli jesteś użytkownikiem Opery, Safari lub Internet Explorera i jesteś ciekawy tego teraz , to łóżko testowe może być używane do zabawy, dopóki wszyscy nie otrzymają wsparcia.
źródło
Skorygowany JavaScript Douglasa Crockforda zawiera
String.prototype.supplant
funkcję. Jest krótki, znajomy i łatwy w użyciu:Jeśli nie chcesz zmieniać prototypu String, zawsze możesz go dostosować, aby był samodzielny, lub umieścić go w innej przestrzeni nazw, czy cokolwiek innego.
źródło
"The {0} says {1}, {1}, {1}!".supplant(['cow', 'moo'])
Uwaga: unikaj jakiegokolwiek systemu szablonów, który nie pozwala ci uciec przed własnymi ogranicznikami. Na przykład nie byłoby sposobu na wyprowadzenie następujących przy użyciu
supplant()
metody wymienionej tutaj.Prosta interpolacja może działać w przypadku małych samodzielnych skryptów, ale często ma tę wadę projektową, która ogranicza każde poważne użycie. Szczerze wolę szablony DOM, takie jak:
I użyj manipulacji jQuery:
$('#age').text(3)
Alternatywnie, jeśli jesteś po prostu zmęczony łączeniem łańcuchów, zawsze istnieje alternatywna składnia:
źródło
Array.join()
jest wolniejsza niż bezpośrednia (+
stylowa) konkatenacja, ponieważ silniki przeglądarki (w tym V8, która zawiera węzeł i prawie wszystko, co obsługuje JS dzisiaj) znacznie go zoptymalizowały i istnieje duża różnica na korzyść bezpośredniej konkatenacjitoken
- w ten sposób, jeśli nie podasz obiektu danych, który maage
element, będzie dobrze.supplant
jest nieuzasadnione:"I am 3 years old thanks to my {age} variable.".supplant({}));
zwraca dokładnie podany ciąg. Gdybyage
je podano, można by nadal drukować{
i}
używać{{age}}
Wypróbuj bibliotekę sprintf (pełna implementacja sprintf JavaScript typu open source). Na przykład:
vsprintf pobiera tablicę argumentów i zwraca sformatowany ciąg.
źródło
Możesz użyć systemu szablonów Prototype, jeśli naprawdę masz ochotę użyć młota do złamania orzecha:
źródło
Używam tego wzorca w wielu językach, gdy jeszcze nie wiem, jak to zrobić poprawnie i chcę szybko znaleźć jakiś pomysł:
Chociaż nie jest szczególnie wydajny, uważam go za czytelny. Zawsze działa i jest zawsze dostępny:
ZAWSZE
źródło
Możesz to zrobić z łatwością za pomocą ES6
template string
i przenieść na ES5 za pomocą dowolnego dostępnego transpilaru, takiego jak babel.http://www.es6fiddle.net/im3c3euc/
źródło
Spróbuj kiwi , lekki moduł JavaScript do interpolacji łańcuchów.
Możesz to zrobić
lub
źródło
Jeśli chcesz interpolować
console.log
dane wyjściowe, to po prostuTutaj
%s
nazywa się to „specyfikatorem formatu”.console.log
ma wbudowaną obsługę tego rodzaju interpolacji.źródło
Oto rozwiązanie, które wymaga podania obiektu o wartościach. Jeśli nie podasz obiektu jako parametru, domyślnie użyje zmiennych globalnych. Ale lepiej trzymaj się tego parametru, jest znacznie czystszy.
źródło
eval
,eval
to zło!eval
, ale czasem nie. Na przykład, jeśli OP chciałby interpolować przy użyciu bieżącego zakresu, bez konieczności przekazywania obiektu odnośnika (jak działa interpolacja Groovy), jestem prawie pewieneval
, że będzie to wymagane. Nie uciekaj się tylko do starego „eval is evil”.eval
jest to jedyny sposób na uzyskanie dostępu do zmiennych lokalnych w zakresie . Więc nie odrzucaj tego tylko dlatego, że rani twoje uczucia. BTW, ja też wolę alternatywny sposób, ponieważ jest bezpieczniejszy, aleeval
metoda dokładnie odpowiada na pytanie OP, stąd jest w odpowiedzi.eval
polega na tym, że nie można uzyskać dostępu do zmiennych z innego zakresu, więc jeśli twoje.interpolate
wywołanie jest w innej funkcji, a nie globalnej, to nie zadziała.Rozwijając drugą odpowiedź Grega Kindela , możesz napisać funkcję eliminującą część płyty kotłowej:
Stosowanie:
źródło
Mogę ci pokazać przykład:
źródło
Od wersji ES6, jeśli chcesz wykonać interpolację ciągów w kluczach obiektowych, otrzymasz,
SyntaxError: expected property name, got '${'
jeśli zrobisz coś takiego:Zamiast tego należy wykonać następujące czynności:
źródło
źródło
Używanie składni szablonów kończy się niepowodzeniem w starszych przeglądarkach, co jest ważne, jeśli tworzysz HTML do użytku publicznego. Używanie konkatenacji jest żmudne i trudne do odczytania, szczególnie jeśli masz wiele lub długie wyrażenia, lub jeśli musisz używać nawiasów do obsługi kombinacji elementów liczbowych i łańcuchowych (oba używają operatora +).
PHP rozwija ciągi cytowane zawierające zmienne, a nawet niektóre wyrażenia, używając bardzo zwartej notacji:
$a="the color is $color";
W JavaScript można napisać wydajną funkcję do obsługi tego:
var a=S('the color is ',color);
przy użyciu zmiennej liczby argumentów. Chociaż w tym przykładzie nie ma przewagi nad konkatenacją, gdy wyrażenia stają się dłuższe, ta składnia może być jaśniejsza. Lub można użyć znaku dolara do zasygnalizowania początku wyrażenia za pomocą funkcji JavaScript, jak w PHP.Z drugiej strony napisanie wydajnej funkcji obejścia w celu zapewnienia podobnego do szablonu rozszerzenia ciągów dla starszych przeglądarek nie byłoby trudne. Ktoś prawdopodobnie już to zrobił.
Wreszcie, wyobrażam sobie, że sprintf (jak w C, C ++ i PHP) mógłby być napisany w JavaScript, chociaż byłby nieco mniej wydajny niż te inne rozwiązania.
źródło
Niestandardowa elastyczna interpolacja:
źródło
Chociaż szablony są prawdopodobnie najlepsze w opisywanym przypadku, jeśli masz lub chcesz swoje dane i / lub argumenty w postaci iterowalnej / tablicowej, możesz użyć
String.raw
.Mając dane jako tablicę, można użyć operatora rozkładania:
źródło
Nie mogłem znaleźć tego, czego szukałem, a potem znalazłem -
Jeśli używasz Node.js, jest wbudowany
util
pakiet z funkcją formatowania, która działa w następujący sposób:Przypadkowo jest to teraz wbudowane w
console.log
smaki również w Node.js -źródło