{"id":950,"date":"2015-03-18T19:13:30","date_gmt":"2015-03-18T18:13:30","guid":{"rendered":"https:\/\/vielhuber.de\/?p=950"},"modified":"2016-06-05T22:59:49","modified_gmt":"2016-06-05T20:59:49","slug":"mehrzeilige-strings-in-javascript","status":"publish","type":"post","link":"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/","title":{"rendered":"Mehrzeilige Strings in JavaScript"},"content":{"rendered":"

Bei der Programmierung mit JavaScript stolpert man oft \u00fcber die fehlende M\u00f6glichkeit, mehrzeilige Strings dadurch zu realisieren, dass sie auch mehrzeilig im Code eingegeben werden. W\u00e4hrend die Aufgabe in anderen Sprachen wie PHP oder Ruby kein Problem darstellt, kann man sich bei JavaScript zun\u00e4chst nur mit Workarounds behelfen, \u00fcber deren Einsatz der pers\u00f6nliche Geschmack bzw. die Browserunterst\u00fctzung entscheidet.<\/p>\n

<\/p>\n

Der naheliegende Versuch<\/p>\n

var str = \"Dies ist eine\r\nmehrzeilige\r\nZeichenkette.\";\r\n<\/code><\/pre>\n
schl\u00e4gt fehl und der Parser sich dann gleich \u00fcber mehrere Dinge (in Form von Unexpected token ILLEGAL) beschwert, da JavaScript (im Gegensatz zu anderen Programmiersprachen wie PHP) nach jedem Zeilenende automatisch ein Semikolon einf\u00fcgt:<\/p>\n
var str = \"Dies ist eine;\r\nmehrzeilige;\r\nZeichenkette.\";\r\n<\/code><\/pre>\n
Eine erste L\u00f6sung des Problems besteht aus der einfachen String-Konkatenation durch den \\n- und +-Operator:<\/p>\n
var str = \"Dies ist eine\\n\" +\r\n\"mehrzeilige\\n\" +\r\n\"Zeichenkette.\";\r\n<\/code><\/pre>\n
Wer eine weniger langsame und etwas sch\u00f6nere Variante bevorzugt, f\u00fcgt an das Ende jeder Zeile einen Backslash:<\/p>\n
var str = \"Dies ist eine\\n\\\r\nmehrzeilige\\n\\\r\nZeichenkette\";\r\n<\/code><\/pre>\n
Alternativ kann man auch die Join-Methode nutzen und erh\u00e4lt:<\/p>\n
var str = [\"Dies ist eine\",\r\n\"mehrzeilige\",\r\n\"Zeichenkette\"].join(\"\\n\");\r\n<\/code><\/pre>\n
Wer hingegen bei regul\u00e4ren Ausdr\u00fccken leuchtende Augen bekommt, nutzt folgende Syntax (match() filtert die Werte zwischen den Kommentaren):<\/p>\n
var str = (function () {\/*Dies ist eine\r\nmehrzeilige\r\nZeichenkette*\/}).toString().match(\/[^]*\\\/\\*([^]*)\\*\\\/\\}$\/)[1];\r\n<\/code><\/pre>\n
Wichtig: Wird der Code minified, kann man diese L\u00f6sung vergessen (da die Kommentare ebenfalls mit entfernt werden).<\/p>\n
Die sch\u00f6nste Variante gelingt mit ECMA6<\/a> und der Hilfe von Template Strings:<\/p>\n
var str = `Dies ist eine\r\nmehrzeilige\r\nZeichenkette`;\r\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Bei der Programmierung mit JavaScript stolpert man oft \u00fcber die fehlende M\u00f6glichkeit, mehrzeilige Strings dadurch zu realisieren, dass sie auch mehrzeilig im Code eingegeben werden. W\u00e4hrend die Aufgabe in anderen Sprachen wie PHP oder Ruby kein Problem darstellt, kann man sich bei JavaScript zun\u00e4chst nur mit Workarounds behelfen, \u00fcber deren Einsatz der pers\u00f6nliche Geschmack bzw. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"gtbabel_prevent_lngs":"","gtbabel_alt_lng":"","footnotes":""},"categories":[1],"tags":[],"class_list":{"0":"post-950","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-blog"},"acf":[],"yoast_head":"Mehrzeilige Strings in JavaScript < Vielhuber David<\/title>\n<meta name=\"description\" content=\"Bei der Programmierung mit JavaScript stolpert man oft \u00fcber die fehlende M\u00f6glichkeit, mehrzeilige Strings dadurch zu realisieren, dass sie auch mehr...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mehrzeilige Strings in JavaScript < Vielhuber David\" \/>\n<meta property=\"og:description\" content=\"Bei der Programmierung mit JavaScript stolpert man oft \u00fcber die fehlende M\u00f6glichkeit, mehrzeilige Strings dadurch zu realisieren, dass sie auch mehrzeilig\" \/>\n<meta property=\"og:url\" content=\"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Vielhuber David\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-18T18:13:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-06-05T20:59:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"552\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"David\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:site\" content=\"@vielhuber\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"David\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"1\u00a0Minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mehrzeilige-strings-in-javascript\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mehrzeilige-strings-in-javascript\\\/\"},\"author\":{\"name\":\"David\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"headline\":\"Mehrzeilige Strings in JavaScript\",\"datePublished\":\"2015-03-18T18:13:30+00:00\",\"dateModified\":\"2016-06-05T20:59:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mehrzeilige-strings-in-javascript\\\/\"},\"wordCount\":202,\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"articleSection\":[\"Blog\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mehrzeilige-strings-in-javascript\\\/\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mehrzeilige-strings-in-javascript\\\/\",\"name\":\"Mehrzeilige Strings in JavaScript < Vielhuber David\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\"},\"datePublished\":\"2015-03-18T18:13:30+00:00\",\"dateModified\":\"2016-06-05T20:59:49+00:00\",\"description\":\"Bei der Programmierung mit JavaScript stolpert man oft \u00fcber die fehlende M\u00f6glichkeit, mehrzeilige Strings dadurch zu realisieren, dass sie auch mehrzeilig\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mehrzeilige-strings-in-javascript\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mehrzeilige-strings-in-javascript\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/blog\\\/mehrzeilige-strings-in-javascript\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/vielhuber.de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mehrzeilige Strings in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#website\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/\",\"name\":\"Vielhuber David\",\"description\":\"Full-Stack Developer\",\"publisher\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/vielhuber.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/vielhuber.de\\\/#\\\/schema\\\/person\\\/64d4ff14713d413ea4d9b210d0c2c6ef\",\"name\":\"David\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"url\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"contentUrl\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\",\"width\":700,\"height\":552,\"caption\":\"David\"},\"logo\":{\"@id\":\"https:\\\/\\\/vielhuber.de\\\/wp-content\\\/uploads\\\/about.jpg\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/vielhuber\"]}]}<\/script>","yoast_head_json":{"title":"Mehrzeilige Strings in JavaScript < Vielhuber David","description":"Bei der Programmierung mit JavaScript stolpert man oft \u00fcber die fehlende M\u00f6glichkeit, mehrzeilige Strings dadurch zu realisieren, dass sie auch mehr...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/","og_locale":"de_DE","og_type":"article","og_title":"Mehrzeilige Strings in JavaScript < Vielhuber David","og_description":"Bei der Programmierung mit JavaScript stolpert man oft \u00fcber die fehlende M\u00f6glichkeit, mehrzeilige Strings dadurch zu realisieren, dass sie auch mehrzeilig","og_url":"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/","og_site_name":"Vielhuber David","article_published_time":"2015-03-18T18:13:30+00:00","article_modified_time":"2016-06-05T20:59:49+00:00","og_image":[{"width":700,"height":552,"url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","type":"image\/jpeg"}],"author":"David","twitter_card":"summary_large_image","twitter_creator":"@vielhuber","twitter_site":"@vielhuber","twitter_misc":{"Verfasst von":"David","Gesch\u00e4tzte Lesezeit":"1\u00a0Minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/#article","isPartOf":{"@id":"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/"},"author":{"name":"David","@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"headline":"Mehrzeilige Strings in JavaScript","datePublished":"2015-03-18T18:13:30+00:00","dateModified":"2016-06-05T20:59:49+00:00","mainEntityOfPage":{"@id":"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/"},"wordCount":202,"publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"articleSection":["Blog"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/","url":"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/","name":"Mehrzeilige Strings in JavaScript < Vielhuber David","isPartOf":{"@id":"https:\/\/vielhuber.de\/#website"},"datePublished":"2015-03-18T18:13:30+00:00","dateModified":"2016-06-05T20:59:49+00:00","description":"Bei der Programmierung mit JavaScript stolpert man oft \u00fcber die fehlende M\u00f6glichkeit, mehrzeilige Strings dadurch zu realisieren, dass sie auch mehrzeilig","breadcrumb":{"@id":"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/vielhuber.de\/blog\/mehrzeilige-strings-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/vielhuber.de\/"},{"@type":"ListItem","position":2,"name":"Mehrzeilige Strings in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/vielhuber.de\/#website","url":"https:\/\/vielhuber.de\/","name":"Vielhuber David","description":"Full-Stack Developer","publisher":{"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/vielhuber.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":["Person","Organization"],"@id":"https:\/\/vielhuber.de\/#\/schema\/person\/64d4ff14713d413ea4d9b210d0c2c6ef","name":"David","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","url":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","contentUrl":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg","width":700,"height":552,"caption":"David"},"logo":{"@id":"https:\/\/vielhuber.de\/wp-content\/uploads\/about.jpg"},"sameAs":["https:\/\/x.com\/vielhuber"]}]}},"_links":{"self":[{"href":"https:\/\/vielhuber.de\/zh-cn\/wp-json\/wp\/v2\/posts\/950","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/vielhuber.de\/zh-cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/vielhuber.de\/zh-cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/zh-cn\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/vielhuber.de\/zh-cn\/wp-json\/wp\/v2\/comments?post=950"}],"version-history":[{"count":1,"href":"https:\/\/vielhuber.de\/zh-cn\/wp-json\/wp\/v2\/posts\/950\/revisions"}],"predecessor-version":[{"id":1298,"href":"https:\/\/vielhuber.de\/zh-cn\/wp-json\/wp\/v2\/posts\/950\/revisions\/1298"}],"wp:attachment":[{"href":"https:\/\/vielhuber.de\/zh-cn\/wp-json\/wp\/v2\/media?parent=950"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/vielhuber.de\/zh-cn\/wp-json\/wp\/v2\/categories?post=950"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/vielhuber.de\/zh-cn\/wp-json\/wp\/v2\/tags?post=950"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}