javascript - example - typescript string format replace




在JavaScript中創建多行字符串 (20)

我在Ruby中有以下代碼。 我想將此代碼轉換為JavaScript。 什麼是JS中的等效代碼?

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

ES6更新:

正如第一個回答提到的那樣,使用ES6 / Babel,你現在可以簡單地使用反引號來創建多行字符串:

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

插值變量是一種流行的新功能,它帶有反向劃分的字符串:

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

這只是簡化為串聯:

user.name + ' liked your post about strings'

原ES5答案:

Google的JavaScript樣式指南建議使用字符串連接而不是轉義換行符:

不要這樣做:

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的一部分。

請改用字符串連接:

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)引入了一種新的文字,即模板文字 。 它們具有許多特徵,其中包括可變插值,但最重要的是,對於這個問題,它們可以是多線的。

模板文字由反引號分隔:

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

(注意:我不主張在字符串中使用HTML)

瀏覽器支持是可以的 ,但您可以使用transpilers更兼容。

原ES5答案:

Javascript沒有here-document語法。 但是,你可以逃避文字換行符,它接近:

"foo \
bar"

javascript中的等價物是:

var text = `
This
Is
A
Multiline
String
`;

這是specification 。 請參閱本頁底部的瀏覽器支持。 這裡有一些examples


Downvoters :此代碼僅供參考。

這已經在Mac上的Fx 19和Chrome 24中進行了測試

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

你可以這樣做...

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

使用腳本標籤:

  • 將包含多行文本的<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>

如果您恰好在Node中運行,則可以使用fs模塊從文件中讀取多行字符串:

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

如果您願意使用轉義換行符,可以很好地使用它們。 它看起來像帶有頁面邊框的文檔


您可以使用TypeScript (JavaScript SuperSet),它支持多行字符串,並轉換回純JavaScript而不會產生任何開銷:

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

alert(templates.myString);

如果您想使用純JavaScript完成相同的操作:

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中使用普通的JavaScript變體(用於清理):

interface externTemplates
{
    myString:string;
}

declare var templates:externTemplates;

alert(templates.myString)

並且您可以使用普通JavaScript變體中的多行字符串對象,您可以將模板放入另一個文件(可以在捆綁包中合併)。

您可以嘗試使用TypeScript
TypeScript


您可以使用+=來連接您的字符串,似乎沒有人回答,這將是可讀的,也很整潔......這樣的事情

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

也可以寫成

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

console.log(hello);

我喜歡這種語法和壓句:

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

(但實際上不能被視為多行字符串)


我對https://.com/a/15558082/80404擴展。 它希望以/*! any multiline comment */的形式發表評論/*! any multiline comment */ /*! any multiline comment */其中符號! 用於防止通過縮小去除(至少對於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();

我想出了這種多線式弦樂器的裝配方法。 由於將函數轉換為字符串也會返回函數內的任何註釋,您可以使用多行註釋/ ** /將註釋用作字符串。 你只需要修剪兩端,你就有了你的字符串。

var 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(myString)

我的基於數組的字符串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()是否佔用了大量時間? 看到這個相關的答案:

有沒有理由JavaScript開發人員不使用Array.push()?

在查看這些(相反的)測試運行之後,看起來.push()對於字符串數組來說是好的,它不會超過100個項目 - 我會避免它支持更大數組的索引添加。


我通過輸出div,使其隱藏,並在需要時通過jQuery調用div id來解決這個問題。

例如

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

然後,當我需要獲取字符串時,我只使用以下jQuery:

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

這會在多行返回我的文字。 如果我打電話

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

我明白了:


有多種方法可以實現這一目標

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

性能方面, Slash連接 (第一個)是最快的。

有關性能的更多詳細信息, 請參閱 此測試用例

更新:

使用ES2015 ,我們可以利用其模板字符串功能。 有了它,我們只需要使用反向標記來創建多行字符串

例:

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

模式text = <<"HERE" This Is A Multiline String HERE在js中不可用(我記得在我很好的舊Perl時代使用它)。

為了保持對複雜或長多行字符串的監督,我有時會使用數組模式:

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注意:在縮小/混淆代碼後,這將丟失


總結一下,我在用戶javascript編程中嘗試了2種方法(Opera 11.01):

所以我推薦Opera用戶JS用戶的工作方法。 與作者所說的不同:

它不適用於Firefox或Opera; 僅適用於IE,Chrome和Safari。

它在Opera 11中工作。至少在用戶JS腳本中。 太糟糕了,我無法對個別答案發表評論或提出答案,我會馬上做。 如果可能的話,有特權的人請為我做。


這適用於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>

剛剛嘗試了Anonymous的答案,發現這裡有一個小技巧,如果反斜杠\
後面有空格則不起作用所以以下解決方案不起作用 -

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

希望能幫助到你 !!





heredoc