Was genau sind Strings / Zeichenketten (in Vue.js)?
Hallo!
Ich lerne gerade programmieren (Vue.js) und bin mir nicht sicher, was alles genau Zeichenketten sind. Hintergrund ist der, dass ich naming conventions einhalten muss, und anstelle " " die Strings als ' ' machen müsste. Vue.js ist nicht gerade die beste Einsteigerssprache, aber es geht gerade nicht anders, ist Pflicht von der Uni. Ich würde mich über Hilfe freuen, weil ich es wirklich gerne verstehen möchte.
Ein Beispiel:
<select v-model="selected">
<option value="hallo">HALLO</option>
</select>
Wennn ich das richtig verstehe, dann wäre "hallo" die Zeichenkette und müsste mit dann also gemäß der naming conventions dann 'halllo' sein. Aber was wäre mit "selected"? Ist das im Prinzip dann nicht auch ein String?
Dasselbe auch bei dem hier:
v-if="active"
class="test"
In dem Fall wäre ja dann vermutlich "test" ebenfalls wieder ein String, richtig?
Aber "active" dann vermutlich nicht?
Vielen Dank schon mal!
Ich würde mich echt über Erklärungen freuen, ich bin echt etwas ratlos.
3 Antworten
Hintergrund ist der, dass ich naming conventions einhalten muss, und anstelle " " die Strings als ' ' machen müsste.
' und " haben den gleichen nutzen, selten macht es mal Sinn das eine über das andere zu nutzen weil man dadurch das andere Zeichen in dem String selber nutzen kann ohne zu escapen.
Die Warnung bezieht sich einfach darauf, dass es sauberer ist sich für eine Art von Anführungszeichen zu entscheiden.
Natürlich kann es sein, dass manche Strings eine besondere Bedeutung haben und weiter verarbeitet werden, aber es bleiben trotzdem Strings.
Als erstes: Vue.js ist keine Programmiersprache, sondern ein Framework. Als Programmiersprache verwendest du JavaScript oder TypeScript.
Eine Zeichenkette ist einfach erst mal ein String. Ob du den in doppelte oder einfache Anführungszeichen setzt, ist in dem Fall vollkommen egal. Da gibt es keine allgemein gültigen Konventionen.
Was die Zeichenkette dann aber repräsentiert, ist eine andere Sache.
Bei <select v-model="selected"> ist select in Vue.js das Model für die Komponente und steht vermutlich für die Variable select die wiederum ein Array ist.
Bei <option value="hallo">HALLO</option> ist hallo nur der Attributwert des HTML-Elements.
Bei v-if="active" ist active wieder eine Variable, diesmal aber ein Boolean.
Und bei class="test" ist test wieder nur der Wert des Class-Attributes.
in diesen v-* Sachen stehen wohl JS Expressions, also klar ist das ein String aber das wird dann wohl irgendwie weiter evaluiert.
Und klar, im Zweifel wird das dann auch irgendwie zu einem Boolean konvertiert.
Gegenfrage: Warum soll active kein Boolean sein. Hier ein einfaches Beispiel:
Weil es genau genommen ein String ist der eine Expression beinhaltet die zu einem boolean evaluiert wird.
Nein, in Vue.js ist das in dem Fall eine reaktive Variable, die ausgewertet wird.
Weil Vue.js einfach nur ein Framework ist und keine eigene Programmiersprache. Von Vue.js mag das ganze vielleicht als Boolean ausgewertet werden, aber in HTML und JS, die dem ganzen zu Grunde liegen, ist es ein String, weil es in Anführungszeichen steht. Genausosehr ist @Click nur ein Attribut und "active = !active" ein String. Dass Vue.js das dann anders interpretiert ändert nichts daran, was es in echt ist.
Was wird ausgewertet? Eine Expression. Was ist eine Expression? Ein String in einem bestimmten Format.
Wird am Ende eine Variable ausgewertet die einen Boolean beinhaltet? Ja. Ändert das etwas an der Tatsache, dass es ursprünglich ein String ist der eine Expression beinhaltet die aus einem Variablennamen besteht? Nein.
Im Kontext von Vue.js – und von nichts anderem reden wir hier und danach wurde explizit gefragt – ist active eine Variable. Punkt!
Wenn wir das im Kontext eines Texteditors betrachten, dann ist active natürlich nur ein String aber das trifft dann auf jede Programmiersprache zu und dann gebe es gar keine Variablen.
Und @click (Kurzform von v-on:click) ist auch kein Attribut, sondern eine Vue-Directive. Auch wenn es ähnlich aussieht, hat das nichts mit HTML zu tun und landet so auch nicht im DOM.
In dem Beispiel, was ich hier kurz zusammengeklimpert habe, kann man in JS-Tab auch schon sehen, was Vue.js daraus macht und wie die App zusammengebaut wird.
Ein Directive *ist* ein Attribut. Aus dem Vue Guide (wenn du mir schon nicht glaubst):
Here we're encountering something new. The v-bind attribute you're seeing is called a directive.
Ich erklärs dir jetzt wie einem Kind: ein gelber Kreis ist ein Kreis. Ein blauer Kreis ist auch ein Kreis. Ein grünes Rechteck ist eine Fläche und oh wunder, gleiches ist auch ein gelber Kreis. Nur weil ein gelber Kreis eine Fläche ist hört er nicht auf ein gelber Kreis zu sein.
Und da wir ja uns nur auf den Kontext von Vue beziehen: Schau an auch im Kontext von Vue Syntax ist ein String ein String. Big surprise, die Menge tobt.
Und genau so ist der Inhalt von diesem Attribut, welches ein Directive ist, eine Expression. Und die beinhaltet einen Variablenname. Unfassbar, jetzt rasten alle aus. Keiner kann es glauben was hier für Erkenntnisse gewonnen werden.
Und da wir ja nur IM KONTEXT VON VUE.JS sprechen, https://i.imgur.com/RzvWNws.png
So ich bin raus.
Freut mich, dass du jetzt raus bist. Wer nicht weiß was eine Variable ist aber andere trotzdem hochnäsig belehren will, hat hier auch nichts zu suchen.
Bin wieder drinnen.
Eine Variable ist ein Konzept bei dem man über einen bestimmten Kennung, in der Regel der Name der Variable, auf einen Wert zugreifen kann, der sich über die Laufzeit des Programms verändern kann :)
Ob dir das klar war oder für dich einfach nur Variablen "Werte mit Namen" waren kann ich nicht sagen.
Und noch als Nachtrag (auch für MrAmazing2): Das die v-if-Directive eine Expression enthält, hab ich ja nicht angezweifelt. In dem Fall ist active aber trotzdem eine Variable und kein einfacher String.
Das sieht man auch gleich, wenn man active nicht definiert hat, dann kommt nämlich die Warnung:
Property "active" was accessed during render but is not defined on instance
Will man es als String auswerten, müsste man es so schreiben:
v-if="'active'"
… was JavaScript like zu true werden würde.
Eine Variable ist ein Konzept bei dem man über einen bestimmten Kennung, in der Regel der Name der Variable, auf einen Wert zugreifen kann, der sich über die Laufzeit des Programms verändern kann :)
Schön, dass du es jetzt verstanden hast. Wie das genau funktioniert, siehst du ja an meinem Beispiel, in dem sich die Variable active von true nach false nach true nach … mit jedem Klick ändert.
In dem Fall ist active aber trotzdem eine Variable und kein einfacher String.
Hat auch niemand behauptet, dass es ein "einfacher" String wäre ;)
Sondern ein String mit bestimmten Inhalt.
"… was JavaScript like zu true werden würde." stimmt aber nicht. Du kannst auch in JS einen String evaluieren und wenn da einfach nur ein Syntaxtoken drinnen steht der nicht zu einem bekannten Wert oder Keyword gemapped ist bekommt man ebenfalls einen Fehler.
let myawesomestring = "active"
eval(myawesomestring) // error
Alles andere wäre Äpfel mit Birnen vergleichen.
Da wird aber nicht eval() aufgerufen, deshalb gibt es auch keine Äpfel und Birnen und v-if="'active'" ist valide.
Weshalb das Javascript-like ist, kannst du hier nachlesen:
Everything With a "Value" is True
…
Everything Without a "Value" is False
https://www.w3schools.com/js/js_booleans.asp
Im Ende ist es nichts anderes als:
if ('active') { /* nicht leerer String == true */ }
if ('') { /* leerer String == false */ }
Im Gegensatz dazu ist es (vereinfacht) in meinem oberen Beispiel aber:
let active = true;
if (active) { /* Boolean Variable mit Wert true == true */ }
Alles was in Anführungszeichen (egal ob doppelte "..." oder einfache '...' ) steht, ist ein String/eine Zeichenkette.
Also im Prinzip müsste ich dann alle oben genannten Sachen in den Beispielen mit Anführungszeichen in meinem Fall dann mit den einfachen Anführungszeichen machen, richtig? (am Endergebnis verändert dies ja dann nichts, aber ich müsste ja naming conventions einhalten..)
Naja ich denke du hast die Frage falsch gestellt, was du wissen willst ist nicht was sind alles Strings (die Antwort ist alles in Quotes), sondern welche Quotes du für welche Strings wo verwenden sollst.
Laut den Vue Style Conventions soll man wohl für HTML Attribute und JS verschieden Anführungszeichen nutzen.
Vielen lieben Dank! Dann erklärt sich das auch, warum es in den programmierten Code mit den Framework Vue.js, welchen ich habe, die Anführungszeichen immer verschieden sind. Ist tatäschlich etwas doof, wenn man als Anfänger reines Javascript als naming conventions Beispiel hat und das nun auf Vue umwandeln muss :D Vielen lieben Dank für deine Erklärung! :)
"active" soll ein Boolean sein? 🤔
würd ich ja verstehen, aber inwiefern ist denn "active" bitte ein Boolean?
Das ist doch wohl eher ein String, der von Vue.js dann als Boolean interpretiert wird, or not?