javascript - لديك - مميزات الجافا سكريبت




إنشاء سلاسل متعددة في JavaScript (20)

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

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

تحديث 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.';

تحديث:

يقدم ECMAScript 6 (ES6) نوعًا جديدًا من القيم الحرفية ، أي القوالب الحرفية . لديهم العديد من الميزات ، الاستيفاء المتغير من بين أمور أخرى ، ولكن الأهم من ذلك بالنسبة لهذه المسألة ، يمكن أن تكون متعددة الخطوط.

يتم حصر قالب حرفية عن طريق backticks :

var html = `
  <div>
    <span>Some HTML here</span>
  </div>
`;

(ملاحظة: أنا لا أدعو لاستخدام HTML في السلاسل)

دعم المستعرض على ما يرام ، ولكن يمكنك استخدام transpilers لتكون أكثر توافقًا.

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

لا تحتوي جافاسكريبت على صيغة وثيقة هنا. يمكنك الهروب من الخط الجديد الحرفي ، ومع ذلك ، والذي يقترب:

"foo \
bar"

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

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

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

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

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

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

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

انا حصلت:


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

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

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


إضافتي إلى 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();

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

  • إضافة كتلة <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>
    

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

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

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

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

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

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


نمط 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 ملاحظة: سيتم فقد هذا بعد تصغير / تشفير الشفرة


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

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>
  `

يسمح لك ES6 باستخدام backtick لتحديد سلسلة على أسطر متعددة. يدعى قالب حرفية. مثله:

var multilineString = `One line of text
    second line of text
    third line of text
    fourth line of text`;

يعمل استخدام backtick في NodeJS ، وهو مدعوم من قبل Chrome و Firefox و Edge و Safari و Opera.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals


يعمل هذا في 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>

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

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

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

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 .


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'));

أعتقد أن هذا الحل يجب أن يعمل في 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>

في صحتك!!


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

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

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

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

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

<!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.

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

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);​

آمل أن يساعد!


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

مثال:

var str = "This world is neither flat nor round. "+ "Once was lost will be found";







heredoc