مميزات إنشاء سلاسل متعددة في JavaScript




مميزات الجافا سكريبت (24)

يمكنك استخدام TypeScript (جافا سكريبت TypeScript ) ، كما أنه يدعم سلاسل متعددة الأسطر ، ويعيد التراجع إلى جافا سكريبت خالص دون تحميل:

var templates = {
    myString: `this is
a multiline
string` 
}

alert(templates.myString);

إذا كنت تريد تحقيق الهدف نفسه باستخدام جافا سكريبت عادي:

var templates = 
{
 myString: function(){/*
    This is some
    awesome multi-lined
    string using a comment 
    inside a function 
    returned as a string.
    Enjoy the jimmy rigged code.
*/}.toString().slice(14,-3)

}
alert(templates.myString)

لاحظ أن iPad / Safari لا يدعم 'functionName.toString()'

إذا كان لديك الكثير من التعليمات البرمجية القديمة ، فيمكنك أيضًا استخدام متغير جافا سكريبت العادي في TypeScript (لأغراض التنظيف):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

ويمكنك استخدام كائن سلسلة متعددة الأسطر من متغير JavaScript بسيط ، حيث تضع القوالب في ملف آخر (والتي يمكنك دمجها في الحزمة).

يمكنك تجربة TypeScript في
TypeScript

لدي الكود التالي في روبي. أرغب في تحويل هذا الرمز إلى JavaScript. ما هو الرمز المكافئ في JS؟

text = <<"HERE"
This
Is
A
Multiline
String
HERE

هناك طرق متعددة لتحقيق ذلك

1. تسلسل القطع

  var MultiLine=  '1\
    2\
    3\
    4\
    5\
    6\
    7\
    8\
    9';

2. سلسلة منتظمة

var MultiLine = '1'
+'2'
+'3'
+'4'
+'5';

3. صفيف الانضمام إلى سلسلة

var MultiLine = [
'1',
'2',
'3',
'4',
'5'
].join('');

أداء الحكيمة ، سلاسل التسلسل (الأول) هو الأسرع.

ارجع إلى حالة الاختبار هذه للحصول على مزيد من التفاصيل حول الأداء

تحديث:

مع ES2015 ، يمكننا الاستفادة من ميزة سلاسل القوالب. مع ذلك ، نحن بحاجة فقط إلى استخدام القراد الخلفي لإنشاء سلاسل متعددة الخطوط

مثال:

 `<h1>{{title}}</h1>
  <h2>{{hero.name}} details!</h2>
  <div><label>id: </label>{{hero.id}}</div>
  <div><label>name: </label>{{hero.name}}</div>
  `

فقط جربت الإجابة المجهولة ووجدت هناك خدعة صغيرة هنا ، إنها لا تعمل إذا كانت هناك مساحة بعد الارتداد العكسي \
لذا الحل التالي لا يعمل -

var x = { test:'<?xml version="1.0"?>\ <-- One space here
            <?mso-application progid="Excel.Sheet"?>' 
};

ولكن عند إزالة الفضاء ، يعمل

var x = { test:'<?xml version="1.0"?>\<-- No space here now
          <?mso-application progid="Excel.Sheet"?>' 
};

alert(x.test);​

آمل أن يساعد!


باختصار ، لقد جربت مقاربتين مذكورين هنا في برمجة جافا سكريبت للمستخدم (Opera 11.01):

لذلك أوصي نهج العمل لمستخدمي JS مستخدمي أوبرا. على عكس ما كان يقوله المؤلف:

لا يعمل على فايرفوكس أو الأوبرا. فقط على IE وكروم وسفاري.

أنها تعمل في Opera 11. على الأقل في البرامج النصية JS المستخدم. سيئة للغاية لا أستطيع التعليق على الإجابات الفردية أو الرد على الإجابة ، سأفعل ذلك على الفور. إذا كان ذلك ممكنا ، شخص لديه امتيازات أعلى يرجى القيام بذلك بالنسبة لي.


أعتقد أن هذا الحل يجب أن يعمل في IE و Chrome و Firefox و Safari و Opera -

باستخدام jQuery :

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert($('#unique_id').html());
</script>

استخدام جافا سكريبت خالص:

<xmp id="unique_id" style="display:none;">
  Some plain text
  Both type of quotes :  " ' " And  ' " '
  JS Code : alert("Hello World");
  HTML Code : <div class="some_class"></div>
</xmp>
<script>
   alert(document.getElementById('unique_id').innerHTML);
</script>

في صحتك!!


بلدي نسخة من الانضمام إلى مجموعة الصفوف concat:

var c = []; //c stands for content
c.push("<div id='thisDiv' style='left:10px'></div>");
c.push("<div onclick='showDo(\'something\');'></div>");
$(body).append(c.join('\n'));

لقد عمل ذلك بشكل جيد بالنسبة لي ، خاصةً أنني غالبًا ما أقوم بإدراج قيم في html تم إنشاؤها بهذه الطريقة. لكن لديها الكثير من القيود. المسافة البادئة سيكون من الرائع. عدم الاضطرار إلى التعامل مع علامات الاقتباس المتداخلة سيكون أمرًا رائعًا حقًا ، ويكتفي ببصمة الضجة.

هو .push () للإضافة إلى المصفوفة التي تستهلك الكثير من الوقت؟ انظر هذه الإجابة ذات الصلة:

( هل هناك سبب لا يستخدم مطورو جافا سكريبت Array.push ()؟ )

بعد النظر في هذه الاختبارات (المعاكسة) ، يبدو أن .push () جيد لمصفوفات السلسلة التي لن تنمو على الأرجح أكثر من 100 عنصر - سأقوم بتفاديها لصالح الإضافات المفهرسة للصفائف الأكبر.


أسهل طريقة لعمل سلاسل متعددة في Javascrips هي استخدام backticks (``). هذا يسمح لك بإنشاء سلاسل متعددة الأسطر التي يمكنك إدراج المتغيرات بها ${variableName}.

مثال:

let name = 'Willem'; 
let age = 26;

let multilineString = `
my name is: ${name}

my age is: ${age}
`;

console.log(multilineString);

التوافق:

  • كان يدخل في ES6 //es2015
  • وهو مدعوم أصلاً من قبل جميع موردي المستعرضات الرئيسية (باستثناء إنترنت إكسبلورر)

تحقق من التوافق الدقيق في مستندات Mozilla هنا


المكافئ في javascript هو:

var text = `
This
Is
A
Multiline
String
`;

وهنا specification . انظر دعم المتصفح في أسفل هذه الصفحة . فيما يلي بعض examples أيضًا.


يمكنك الحصول على سلاسل متعددة الأسطر في جافا سكريبت خالص.

تعتمد هذه الطريقة على تسلسل الوظائف ، والذي يتم تعريفه على أنه معتمد على التنفيذ . إنه يعمل في معظم المتصفحات (انظر أدناه) ، ولكن ليس هناك ما يضمن أنه سيظل يعمل في المستقبل ، لذلك لا تعتمد عليه.

باستخدام الوظيفة التالية:

function hereDoc(f) {
  return f.toString().
      replace(/^[^\/]+\/\*!?/, '').
      replace(/\*\/[^\/]+$/, '');
}

يمكنك الحصول على وثائق مثل هذا:

var tennysonQuote = hereDoc(function() {/*!
  Theirs not to make reply,
  Theirs not to reason why,
  Theirs but to do and die
*/});

تم اختبار الطريقة بنجاح في المتصفحات التالية (لم يتم ذكرها = لم يتم اختبارها):

  • IE 4 - 10
  • Opera 9.50 - 12 (وليس في 9 -)
  • سفاري 4 - 6 (ليس في 3 -)
  • Chrome 1 - 45
  • Firefox 17 - 21 ( ليس في 16- )
  • Rekonq 0.7.0 - 0.8.0
  • غير مدعوم في Konqueror 4.7.4

كن حذرا مع المعبئ الخاص بك ، على الرغم من. تميل إلى إزالة التعليقات. بالنسبة لضاغط YUI ، يبدأ التعليق بـ /*! (مثل تلك التي استخدمتها) سيتم الاحتفاظ بها.

أعتقد أن الحل الحقيقي هو استخدام CoffeeScript .


نمط text = <<"HERE" This Is A Multiline String HERE لا يتوفر في شبيبة (أتذكر استخدامه كثيرا في بلدي الأيام بيرل القديمة الجيدة).

للإبقاء على الإشراف مع سلاسل متعددة الأسطر معقدة أو طويلة ، أستخدم أحيانًا نمط مصفوفة:

var myString = 
   ['<div id="someId">',
    'some content<br />',
    '<a href="#someRef">someRefTxt</a>',
    '</div>'
   ].join('\n');

أو أن النمط المجهول أظهر بالفعل (الهروب من جديد) ، والذي يمكن أن يكون كتلة قبيحة في شفرتك:

    var myString = 
       '<div id="someId"> \
some content<br /> \
<a href="#someRef">someRefTxt</a> \
</div>';

هنا آخر "خدعة" غريبة ولكنها تعمل " 1 :

var myString = (function () {/*
   <div id="someId">
     some content<br />
     <a href="#someRef">someRefTxt</a>
    </div>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

تحرير خارجي: jsfiddle

يدعم ES20xx امتداد السلاسل عبر أسطر متعددة باستخدام سلاسل القوالب :

let str = `This is a text
    with multiple lines.
    Escapes are interpreted,
    \n is a newline.`;
let str = String.raw`This is a text
    with multiple lines.
    Escapes are not interpreted,
    \n is not a newline.`;

1 ملاحظة: سيتم فقد هذا بعد تصغير / تشفير الشفرة


استخدام علامات النص البرمجي:

  • إضافة كتلة <script>...</script> تحتوي على نص متعدد الأسطر في علامة head ؛
  • الحصول على نص متعدد الأسطر كما هو ... (احترس من ترميز النص: UTF-8 ، ASCII)

    <script>
    
        // pure javascript
        var text = document.getElementById("mySoapMessage").innerHTML ;
    
        // using JQuery's document ready for safety
        $(document).ready(function() {
    
            var text = $("#mySoapMessage").html(); 
    
        });
    
    </script>
    
    <script id="mySoapMessage" type="text/plain">
    
        <soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/" xmlns:typ="...">
           <soapenv:Header/>
           <soapenv:Body>
              <typ:getConvocadosElement>
                 ...
              </typ:getConvocadosElement>
           </soapenv:Body>
        </soapenv:Envelope>
    
        <!-- this comment will be present on your string -->
        //uh-oh, javascript comments...  SOAP request will fail 
    
    
    </script>
    

إذا كنت تعمل في عقدة فقط ، يمكنك استخدام الوحدة النمطية fs للقراءة في سلسلة متعددة الأسطر من ملف:

var diagram;
var fs = require('fs');
fs.readFile( __dirname + '/diagram.txt', function (err, data) {
  if (err) {
    throw err; 
  }
  diagram = data.toString();
});

انت تستطيع فعل ذالك...

var string = 'This is\n' +
'a multiline\n' + 
'string';

تحديث ES6:

كما يذكر الجواب الأول ، مع ES6 / بابل ، يمكنك الآن إنشاء سلاسل متعددة الأسطر ببساطة باستخدام backticks:

const htmlString = `Say hello to 
multi-line
strings!`;

المتغيرات Interpolating هي ميزة جديدة شائعة تأتي مع سلاسل محددة بعلامة خلفية محددة:

const htmlString = `${user.name} liked your post about strings`;

هذا فقط ينتقل إلى تسلسل:

user.name + ' liked your post about strings'

الإجابة الأصلية ES5:

يوصي دليل أنماط جافا سكريبت من Google باستخدام سلسلة السلاسل بدلاً من الهروب من الخطوط الجديدة:

لا تفعل هذا:

var myString = 'A rather long string of English text, an error message \
                actually that just keeps going and going -- an error \
                message to make the Energizer bunny blush (right through \
                those Schwarzenegger shades)! Where was I? Oh yes, \
                you\'ve got an error and all the extraneous whitespace is \
                just gravy.  Have a nice day.';

لا يمكن تجريد المساحة البيضاء في بداية كل سطر بأمان في وقت التجميع ؛ المسافة البيضاء بعد القطع ستؤدي إلى أخطاء صعبة ؛ وعلى الرغم من أن معظم محركات الأقراص تدعم هذا ، إلا أنها ليست جزءًا من ECMAScript.

استخدم سلسلة string بدلاً من ذلك:

var myString = 'A rather long string of English text, an error message ' +
               'actually that just keeps going and going -- an error ' +
               'message to make the Energizer bunny blush (right through ' +
               'those Schwarzenegger shades)! Where was I? Oh yes, ' +
               'you\'ve got an error and all the extraneous whitespace is ' +
               'just gravy.  Have a nice day.';

إضافتي إلى https://.com/a/15558082/80404 . انها تتوقع تعليق في شكل /*! any multiline comment */ /*! any multiline comment */ أين الرمز! يستخدم لمنع إزالة عن طريق minification (على الأقل لضاغط YUI)

Function.prototype.extractComment = function() {
    var startComment = "/*!";
    var endComment = "*/";
    var str = this.toString();

    var start = str.indexOf(startComment);
    var end = str.lastIndexOf(endComment);

    return str.slice(start + startComment.length, -(str.length - end));
};

مثال:

var tmpl = function() { /*!
 <div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
    </ul>
 </div>
*/}.extractComment();

تم تحديثه لعام 2015 : بعد ست سنوات الآن: يستخدم معظم الأشخاص محمل وحدة نمطية ، وأنظمة الوحدات الرئيسية لكل منها طرق لتحميل النماذج. إنها غير مضمنة ، ولكن النوع الأكثر شيوعًا للسلسلة متعددة الخطوط هي القوالب ، ويجب بشكل عام إبقاء القوالب خارج JS على أي حال .

require.js: "يتطلب النص".

باستخدام plug.js 'text' plugin ، مع قالب متعدد الأسطر في template.html

var template = require('text!template.html')

NPM / browserify: وحدة "brfs"

يستخدم Browserify وحدة "brfs" لتحميل الملفات النصية. سيؤدي ذلك بالفعل إلى إنشاء القالب الخاص بك في HTML الخاص بك المجمعة.

var fs = require("fs");
var template = fs.readFileSync(template.html', 'utf8');

سهل.


أنا أحب هذه الصيغة و indendation:

string = 'my long string...\n'
       + 'continue here\n'
       + 'and here.';

(لكن في الواقع لا يمكن اعتبارها سلسلة متعددة الأسطر)


أنا حل هذا عن طريق إخراج div ، مما يجعلها مخفية ، واستدعاء معرف شعبة jQuery عندما كنت في حاجة إليها.

على سبيل المثال

<div id="UniqueID" style="display:none;">
     Strings
     On
     Multiple
     Lines
     Here
</div>

ثم عندما أحتاج إلى الحصول على السلسلة ، أستخدم فقط jQuery التالي:

$('#UniqueID').html();

والتي ترجع النص الخاص بي على أسطر متعددة. إذا اتصلت

alert($('#UniqueID').html());

انا حصلت:


يمكنك استخدام +=لسلسلة السلسلة الخاصة بك ، يبدو وكأنه لا أحد أجاب ذلك ، والتي ستكون قابلة للقراءة ، وأيضا أنيق ... شيء من هذا القبيل

var hello = 'hello' +
            'world' +
            'blah';

يمكن أيضا أن يكتب كما

var hello = 'hello';
    hello += ' world';
    hello += ' blah';

console.log(hello);

لاحظ أيضًا أنه عند تمديد سلسلة عبر خطوط متعددة باستخدام الخط المائل للخلف في نهاية كل سطر ، فإن أي أحرف إضافية (معظمها مسافات وعلامات تبويب وتعليقات تمت إضافتها عن طريق الخطأ) بعد إعادة الخط المائل للخلف ستسبب خطأً غير متوقع في الأحرف ، والذي استغرق ساعة للعثور على خارج

var string = "line1\  // comment, space or tabs here raise error
line2";

يعمل هذا في IE و Safari و Chrome و Firefox:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<div class="crazy_idea" thorn_in_my_side='<table  border="0">
                        <tr>
                            <td ><span class="mlayouttablecellsdynamic">PACKAGE price $65.00</span></td>
                        </tr>
                    </table>'></div>
<script type="text/javascript">
    alert($(".crazy_idea").attr("thorn_in_my_side"));
</script>

يجب عليك استخدام عامل التشغيل السلسة "+".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p id="demo"></p>
    <script>
        var str = "This "
                + "\n<br>is "
                + "\n<br>multiline "
                + "\n<br>string.";
        document.getElementById("demo").innerHTML = str;
     </script>
</body>
</html>

باستخدام \nالتعليمات البرمجية المصدر ستبدو -

This 
 <br>is
 <br>multiline
 <br>string.

باستخدام <br>ناتج متصفحك سيبدو -

This
is
multiline
string.

Downvoters : يتم توفير هذا الرمز للحصول على معلومات فقط.

تم اختبار ذلك في Fx 19 و Chrome 24 على نظام التشغيل Mac

DEMO

var new_comment; /*<<<EOF 
    <li class="photobooth-comment">
       <span class="username">
          <a href="#">You</a>
       </span>
       <span class="comment-text">
          $text
       </span>
       <span class="comment-time">
          2d
       </span>
    </li>
EOF*/
// note the script tag here is hardcoded as the FIRST tag 
new_comment=document.currentScript.innerHTML.split("EOF")[1]; 
alert(new_comment.replace('$text','Here goes some text'));

أنا مندهش أنني لا أرى هذا ، لأنه يعمل في كل مكان لقد اختبرت ذلك ، وهو مفيد للغاية على سبيل المثال القوالب:

<script type="bogus" id="multi">
    My
    multiline
    string
</script>
<script>
    alert($('#multi').html());
</script>

لا أحد يعرف من بيئة حيث يوجد HTML لكنه لا يعمل؟





heredoc